Centering a div with auto width?

#1

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!

#2

Use display:table not table-cell and then it will centre horizontally.

1 Like
#3

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?

#4

It’s because logo-text is a block element (div) unless you have styled it differently.

1 Like
#5

You don’t show the styles associated with those elements so I can’t second guess what you have done.:slight_smile:

Block elements like divs will of course naturally start on a new line unless you tell them not to.

#6

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:

https://jsfiddle.net/toolman/w587q1s2/1/

#7

Try this:

.logo{
	display: flex;
       justify-content:center
}
1 Like
#8

Thank you, that worked great :smiley:

1 Like