CODEWITHSUNDEEP
htmlcss
Mark Dyson
Mark Dyson

Reputation: 305

Unable to center logo and text displayed side by side

I've tried searching on this issue but I'm still not getting what my problem is. I have a title that consists of a logo and then some title text displayed side by side. I want the pair to be centered on the page. In the following example they are side by side but displayed all the way to the left of the page:

CSS:

#header_block {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 80%
    text-align: center;
}

.header_item {
    display:inline-block;
}

HTML:

<div id='header_block'>
    <img class='header_item' src="img/logo.png" style="width:80px; height:80px;">
    <h1 class='header_item'>Title Goes Here</h1>
</div>

I've tried all sorts of variations but the centering part just isn't working for me. Can you please help shed some light on my confusion? Many thanks in advance.

Upvotes: 2

Views: 1114

Answers (5)

jacefarm
jacefarm

Reputation: 7411

Your header block is moving left because margin-left: auto is putting it there. If you remove the width property from #header-block, you could then do this:

    #header-block {
      position: relative;
      margin-left: 50%;   /* centers the header-block's left edge, 
                             but still too far */ 
      left: -159px;       /* accounts for 1/2 the width of inner 
                             content, and moves it back to the 
                             left... now it's centered */
    }

Please note, I follow the convention of using hyphens for CSS class names, rather than underscores.

I've created a codepen example for you.

Upvotes: 0

MrDerek
MrDerek

Reputation: 31

why not just do -

margin-left: 10%;
margin-right: 10%;

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

It happens because margin:auto requires width to be specified to the container, in your syntax you're missing semicolon ; after width i don't know may be it will be a typo and apart from that you need to set vertical-align css rule to make it rather specific

#header_block {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 80%; /*<-- added semi colon*/
    text-align: center;
}
.header_item {
   display: inline-block;
   vertical-align: middle; /* add this */
}

Demo

Upvotes: 3

user2933885
user2933885

Reputation:

Assuming you want to center it horizontally I would just use the following CSS:

img{
    margin-left:auto;
    margin-right:auto;
    width:80%;
    display:block;
}
.header_item{
    text-align:center;
}

Upvotes: 0

Vinky
Vinky

Reputation: 341

Is it just the missing ; after your width declaration ?

Adding it, I see no issue

Upvotes: 1

Related Questions