CODEWITHSUNDEEP
csscss-floatcenter
Matt
Matt

Reputation: 3848

How do I center content next to a floated element and relative to the containing element?

I have markup that looks like this

<div>
  <h1 style="text-align:center;" >Heading 1</h1>
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >Heading 2</h1>
</div>
<div>
  Content goes here
</div>

The problem is that heading 2 is centered relative to the remainder of space after the image, and not to the whole div, so its not centered on the page.

If I remove the img from the flow with position:absolute, it does not push down the content and instead overlaps it.

Upvotes: 9

Views: 2774

Answers (5)

Jonathan Applebaum
Jonathan Applebaum

Reputation: 5986

I know i am late for the party, but for future readers I found a different approach for that problem. use 3 div elements (left div,middle div, right div) inside a flex displayed div container.

make the left and right div the same relative width (in %) and float each one of the to his side.
set the middle div width with reminder of 100% - (left div + right div). locate the image in the left div (or right div if your direction is RTL).
set the text align of the middle div as 'center'. check this example. also here is a Plunker .

enter image description here 

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <style>

#editorheader {
  display:flex;
}

#leftheaderdiv {
    float:left;
    width:20%;
    background-color:gray;
    display:inline-block;
}
#middleheaderdiv {
float:left;
    width:60%;
    background-color:red;
    display:inline-block;
    text-align: center;
}

#rightheaderdiv {
    float:right;
    width:20%;
    background-color: gray;
}

    </style>
  </head>

  <body>
   <div class="subheader" id="editorheader">
       <div id="leftheaderdiv"><img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d"/></div>
       <div id="middleheaderdiv">I AM IN THE MIDDLE</div>
       <div id="rightheaderdiv"></div>
   </div>

  </body>

</html>

Upvotes: 1

Matt
Matt

Reputation: 3848

Solved it through trial and error. I don't know why but in my testing it only works if width is set between 12 and 80%.

So it seems "h1" is a block element, and text-align does not center block elements, it only centers inline elements inside it, which explains the "centered off-center" behavior. So it turns out the answer is the same answer to the question "how do you center a block element?"

<div>
    <h1 style="text-align:center;">Heading 1</h1>
    <img style="float:left;" src="logo.gif"/>
    <h1 style=" 
             text-align:center;
             margin-left:auto;
             margin-right:auto;
             width:50%;
      ">Heading 2</h1>
</div>
<div style="clear:both;">
  Content goes here
</div>

Upvotes: 1

lushnis
lushnis

Reputation: 36

This most simple solution:

<h2 style="text-align:center;text-indent:-*px">Heading 2</h2>

  • = the logo width

Upvotes: 0

littlegreen
littlegreen

Reputation: 7420

One way is to add a right padding to the div with the size of the logo:

<div style="padding-right: 50px;">
  <img style="float:left;" src="logo.gif"/>
  <h1 style="text-align:center;" >Heading</h1>
</div>
<div>
  Content goes here
</div>

Another way is to remove the heading from the flow. This only works on the assumption that the logo height is bigger than the heading height. Beware also that image and heading could overlap.

 <h1 style="position: absolute; width: 100%; text-align:center;">
    Heading
</h1>
<img style="float:left;" src="logo.gif"/>
<div style="clear:both;">
  Content goes here
</div>

Upvotes: 1

zgorawski
zgorawski

Reputation: 2727

If you are really using logo image then you might try this solution:

<div> 
  <img style="float:left;" src="logo.jpg"/> 
  <h1 style="text-align:center; position:relative; left:-100px;" >Heading</h1> 
</div>

where -100px replace with half of yours image width.

edit:

idea with absolute position from littlegreen's answer is working. Check it:

<div style="position:relative;"> 
  <img style="float:left; position:absolute;" src="logo.jpg"/> 
  <h1 style="text-align:center;" >Heading</h1> 
</div>

Upvotes: 0

Related Questions