格垂直和水平[重复]内的HTML内容对准

问题描述 投票:-2回答:2

我想与高度50vh和全角一个div。里面我需要一个<ul>元件,taht在div的左半垂直和水平方向为中心,即在div的右半垂直和水平中心的<image>。我试过这么多东西,不能得到它的权利。谁能帮我?

<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>
html css
2个回答
0
投票
display flex;
flex-direction: column;

会让你的两个内部的div包括其内容垂直。

justify-content: center; 

将您的内容(UL / IMG)中心(垂直),和

margin: 0 auto;

会让他们水平排列

.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>

0
投票

您可以使用柔性框中,选中下面的例子

.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>

推荐问答