77

How to center on the same "line" two div blocks?

First div: 

<div id=bloc1><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>

Second div: 

<div id=bloc2><img src="..."></div>
Improve this question
3
  • 1
    Float or inline-block via CSS.
    – j08691
    Commented May 4, 2012 at 15:16
  • You can also use display : table-cell; and add line break where you want using <br>
    – specdrake
    Commented Aug 1, 2020 at 6:59
  • Related post - Align <div> elements side by side
    – RBT
    Commented Aug 14, 2021 at 8:19

11 Answers 11

Reset to default
117

CSS:

#block_container
{
    text-align:center;
}
#bloc1, #bloc2
{
    display:inline;
}

HTML

<div id="block_container">

    <div id="bloc1"><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>  
    <div id="bloc2"><img src="..."></div>

</div>

Also, you shouldn't put raw content into <div>'s, use an appropriate tag such as <p> or <span>.

Edit: Here is a jsFiddle demo.

Improve this answer
5
  • 1
    The image is in the middle ... the text is after and right aligned
    – Bertaud
    Commented May 4, 2012 at 15:37
  • @Bertaud then you must have some other CSS/HTML interfering because the above works. See my jsFiddle demo.
    – MrCode
    Commented May 4, 2012 at 15:50
  • I think you are right :-( Do you know how to validate the whole html page ?
    – Bertaud
    Commented May 4, 2012 at 16:01
  • Gildor's answer is prefereable, because it also works with nested <div> tags using display:inline-block;.
    – j.c
    Commented Sep 8, 2016 at 14:24
  • I want to center bloc1 and align bloc2 to the right while keeping them on the same line. How can this be done?
    – Cardinal System
    Commented Nov 19, 2017 at 18:46
65
+50

You can do this in many way.

  1. Using display: flex

#block_container {
    display: flex;
    justify-content: center;
}
<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

  1. Using display: inline-block

#block_container {
    text-align: center;
}
#block_container > div {
    display: inline-block;
    vertical-align: middle;
}
<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

  1. using table

<div>
    <table align="center">
        <tr>
            <td>
                <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
            </td>
            <td>
                <div id="bloc2"><img src="..."></div>
            </td>
        </tr>
    </table>
</div>

Improve this answer
35

I think now, the best practice is use display: inline-block;

look like this demo:

div {
  width: 40%;
  padding: 20px;
  display: inline-block;
}
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

EDIT (02/2021):

Best practice now may be to using display: flex; flex-wrap: wrap; on div container and flex-basis: XX%; on div

look like this demo:

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

div {
  flex-basis: 45%;
  margin-top: 20px;
}
<body>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</body>

Improve this answer
4
  • 3
    Thank you!! This is a better answer than the accepted one, because it works for nested <div>s too!
    – j.c
    Commented Sep 8, 2016 at 14:21
  • 1
    this is best answer than accepted coz inline-block cover margin too
    – Ismail Farooq
    Commented Apr 18, 2017 at 7:30
  • nope! as soon as you make uneven widths this fails to work : jsfiddle.net/L8rkqzd2
    – tatsu
    Commented Aug 21, 2017 at 13:41
  • 1
    @tatsu It's true! With uneven widths, unfortunately, you need to lock same height too. Look if this solve your problem: jsfiddle.net/0a7x3oya/1
    – Simone S.
    Commented Jan 17, 2018 at 11:12
11

You can use a HTML table:

<table>
  <tr>
    <td>
      <div id="bloc1">your content</div>
    </td>
    <td>
      <div id="bloc2">your content</div>
    </td>
  </tr>
</table>

Improve this answer
5

Try an HTML table or use the following CSS :

<div id="bloc1" style="float:left">...</div>
<div id="bloc2">...</div>

(or use an HTML table)

Improve this answer
3
  • 2
    Tables are for tabular data... not for presentation.
    – Ben Everard
    Commented May 4, 2012 at 15:17
  • 3
    html table are also a way to present data. huh?
    – devasia2112
    Commented May 12, 2014 at 21:05
  • afterwards might want to reset formatting by <div style={{clear: "left"}}>
    – Neil
    Commented Feb 11, 2017 at 7:39
3

diplay:flex; is another alternative answer that you can add to all above answers which is supported in all modern browsers.

#block_container {
  display: flex;
  justify-content: center;
}
<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

Improve this answer
1

Use following code:

#container
        {
            text-align:center;
        }
        #bloc1, #bloc2
        {
            display:inline;
        }
     <div id="container">
          <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
          <div id="bloc2"><img src="..."></div>
        </div>

Improve this answer
0

What I would first is make the following CSS code:

#bloc1 {
   float: left
}

This will make #bloc2 be inline with #bloc1.

To make it central, I would add #bloc1 and #bloc2 in a separate div. For example:

<style type="text/css">
    #wrapper { margin: 0 auto; }
</style>
<div id="wrapper">
    <div id="bloc1"> ... </div>
    <div id="bloc2"> ... </div>
</div>
Improve this answer
1
  • that doesn't work: bloc1 is on right, bloc2 is on another line !
    – Bertaud
    Commented May 4, 2012 at 15:28
0

Use below Css:

#bloc1,
#bloc2 {
display:inline
} 

body {
text-align:center
}

It will make the mentioned 2 divs in the center on the same line.

Improve this answer
0

Use a table inside a div.

 <div>
       <table style='margin-left: auto; margin-right: auto'>
            <tr>
               <td>
                  <div>Your content </div>
               </td>
               <td>
                  <div>Your content </div>
               </td>
            </tr>
       </table>
    </div>

Improve this answer
-2

Use Simple HTML

<frameset cols="25%,*">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>
Improve this answer
1
  • While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.
    – Clijsters
    Commented Nov 22, 2017 at 13:01

Not the answer you're looking for? Browse other questions tagged or ask your own question.