Two div blocks on same line

Question

How to center on the same  line  two div blocks     First div      lt div id bloc1 gt  lt  php echo   version    version   Copyright  amp copy  All Rights Reserved      gt  lt  div gt      Second div      lt div id bloc2 gt  lt img src       gt  lt  div gt

User · Answer

HTML File    lt div id  container  gt         lt div id  bloc1  gt Copyright  amp copy  All Rights Reserved  lt  div gt         lt div id  bloc2  gt  lt img src       gt  lt  div gt       lt  div gt    CSS File    container               text-align center             bloc1   bloc2               display inline

User · Answer

You can do this in many way         Using display  flex       x000D   x000D   block container   x000D      display  flex  x000D      justify-content  center  x000D    x000D   lt div id  block container  gt  x000D     lt div id  bloc1  gt Copyright  amp copy  All Rights Reserved  lt  div gt  x000D     lt div id  bloc2  gt  lt img src       gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D          Using display  inline-block       x000D   x000D   block container   x000D      text-align  center  x000D    x000D   block container  gt  div   x000D      display  inline-block  x000D      vertical-align  middle  x000D    x000D   lt div id  block container  gt  x000D     lt div id  bloc1  gt Copyright  amp copy  All Rights Reserved  lt  div gt  x000D     lt div id  bloc2  gt  lt img src       gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D          using table       x000D   x000D   lt div gt  x000D       lt table align  center  gt  x000D           lt tr gt  x000D               lt td gt  x000D                   lt div id  bloc1  gt Copyright  amp copy  All Rights Reserved  lt  div gt  x000D               lt  td gt  x000D               lt td gt  x000D                   lt div id  bloc2  gt  lt img src       gt  lt  div gt  x000D               lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

CSS    block container       text-align center     bloc1   bloc2       display inline      HTML   lt div id  block container  gt        lt div id  bloc1  gt  lt  php echo   version    version   Copyright  amp copy  All Rights Reserved      gt  lt  div gt         lt div id  bloc2  gt  lt img src       gt  lt  div gt    lt  div gt    Also  you shouldn t put raw content into  lt div gt  s  use an appropriate tag such as  lt p gt  or  lt span gt    Edit  Here is a jsFiddle demo

User · Answer

diplay flex  is another alternative answer that you can add to all above answers which is supported in all modern browsers    x000D   x000D   block container   x000D    display  flex  x000D    justify-content  center  x000D    x000D   lt div id  block container  gt  x000D     lt div id  bloc1  gt Copyright  amp copy  All Rights Reserved  lt  div gt  x000D     lt div id  bloc2  gt  lt img src       gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I think now  the best practice is use display  inline-block  look like this demo  https   jsfiddle net vjLw1z7w  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  https   jsfiddle net 42L1emus 1

User · Answer

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    lt style type  text css  gt       wrapper   margin  0 auto     lt  style gt   lt div id  wrapper  gt       lt div id  bloc1  gt       lt  div gt       lt div id  bloc2  gt       lt  div gt   lt  div gt

User · Answer

Use a table inside a div    lt div gt      lt table style  margin-left  auto  margin-right  auto  gt           lt tr gt              lt td gt                 lt div gt Your content  lt  div gt              lt  td gt              lt td gt                 lt div gt Your content  lt  div gt              lt  td gt           lt  tr gt      lt  table gt   lt  div gt

User · Answer

You can use a HTML table    lt table gt   lt tr gt   lt td gt   lt div id  bloc1  gt your content lt  div gt   lt  td gt   lt td gt   lt div id  bloc2  gt your content lt  div gt   lt  td gt   lt  tr gt   lt  table gt

User · Answer

Use Simple HTML   lt frameset cols  25     gt     lt frame src  frame a htm  gt     lt frame src  frame b htm  gt   lt  frameset gt

User · Answer

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

User · Answer

Try an HTML table or use the following CSS     lt div id  bloc1  style  float left  gt     lt  div gt   lt div id  bloc2  gt     lt  div gt     or use an HTML table

[html] Two div blocks on same line

Examples related to html

Examples related to css