Hi there,
I am trying to center the follow logo
div
so it appears centered horizontally, but it’s not working.
This is what I have tried:
<header class="container-fluid">
<div class="container">
<div class="logo" style="margin: 0px auto; display: table-cell;">
<img src="images/nm-logo.png" />
<div class="logo-text">
<h1>TEXT</h1>
<h2>Sub heading</h2>
</div>
</div>
</div>
</header>
Is it possible to center the div
with the class
logo
without giving it a width
? If not, I think I will just give it a fixed width.
Thanks!
PaulOB
2
Use display:table not table-cell and then it will centre horizontally.
1 Like
Thank you, that has now centered it.
However, the logo image is appearing on a separate line to the logo-text div
. I’m wondering if this is because nothing has a set width
?
SamA74
4
It’s because logo-text is a block element (div) unless you have styled it differently.
1 Like
PaulOB
5
You don’t show the styles associated with those elements so I can’t second guess what you have done.
Block elements like divs will of course naturally start on a new line unless you tell them not to.
Sorry, this is the CSS:
.logo{
margin: 0px auto;
display: table;
}
.logo img{
max-width: 90px;
margin-right: 15px;
}
.logo-text h1{
font-size: 30px;
padding: 0;
margin: 0 0 15px; 0
}
.logo-text h2{
font-size: 22px;
padding: 0;
margin: 0
}
I’ve tried using display: flex which aligns the items on one line, but it doesn’t then center the whole thing.
I have created a fiddle:
PaulOB
7
Try this:
.logo{
display: flex;
justify-content:center
}
1 Like
Thank you, that worked great 
1 Like
system
Closed
9
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.