html align content inside div vertically and horizontally

Question

i want a div with height 50vh and full width. Inside it i need a <ul> element, taht is centered vertically and horizontally in the left half of the div and an <image> that is centered vertically and horizontally in right half of the div. I've tried so many things and can't get it right. Can anyone help me?

<div style="height:50vh; width:100vw;"> 

    <div style="display:inline-block; height:50vh; width:49vw; vertical-align: middle">
        <ul>
            <!--...-->
        </ul>
    </div>
    <div style="display:inline-block; height:50vh;width:50vw; vertical-align: middle">
        <img src="img/Kundenstrategie/Logos.png" style="width: 40vw;"/>
    </div>
</div>

Please look for existing answers before asking new questions: https://stackoverflow.com/search?q=align+content+inside+div+vertically+and+horizontally — Diodeus - James MacFarlane, Feb 05 '19 at 14:55

Daniel Vafidis · Accepted Answer · 2019-02-05T15:07:56.627

display flex;
flex-direction: column;

will make your two inner divs include their content vertically.

justify-content: center;

will make your content (ul/img) centered (vertically), and

margin: 0 auto;

will make them aligned horizontally

.container{
  display:flex;
  flex-direction: row;
}

.left, .right{
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul, img{
margin: 0 auto;
}

<div class="container">
  <div class="left">
    <ul>
      <li>aaaa</li>
      <li>bbbb</li>
      <li>cccc</li>
    </ul>
  </div>
  <div class="right">
    <img src="https://via.placeholder.com/200"/>
  </div>
</div>

Sibongile · Answer 2 · 2019-02-06T12:10:46.130

0

You can use flex-box , check example below

.main {
display:flex;
width: 100%;
height: 50vh;
background: black;
flex-basis: 0;
align-content: center;



}

.child {
width: 50%;
height: 100%;
margin:auto;
padding:0;
text-align:center;
justify-content:center;


}


ul {
background: blue;
display:flex;
flex-direction:column;

}

<div class="main">
<ul class="child">
<li>List</li>
<li>List</li>
</ul>
<img  class='child'  src='https://via.placeholder.com/300.png/'>
</div>

edited Feb 06 '19 at 12:10

answered Feb 05 '19 at 15:03

Sibongile

1
2

this way the img gets sized to fill the height, and the
– Ginso Feb 05 '19 at 15:18
sorry didn't get the description properly , fixed if by adding flex to the child and changing the default flex-direction of row to column. – Sibongile Feb 06 '19 at 12:17

html align content inside div vertically and horizontally

2 Answers2