Question

我想要一个高度为50vh和全宽的div。在其中，我需要一个<ul>元素，taht在div的左半部分垂直和水平居中，而<image>在div的右半部分垂直和水平居中。我已经尝试了很多事情，但做得不好。谁能帮我吗？

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

Answer 1

const dataLog = [
  {id: 12489, addedOn: "2019-02-04T15:19:54"},
  {id: 12489, addedOn: "2019-02-04T15:19:54"},
  {id: 12489, addedOn: "2019-02-04T15:19:54"},
  {id: 12489, addedOn: "2019-02-04T15:19:54"},
  {id: 12489, addedOn: "2019-02-04T15:19:54"},
  {id: 12489, addedOn: "2019-02-04T15:19:54"}
]


const dataLog2 =[
  {id: 12489, addedOn: "2019-02-04T15:19:54"},
  {id: 15000, addedOn: "2019-02-04T15:19:54"},
  {id: 15100, addedOn: "2019-02-04T15:19:54"},
  {id: 15200, addedOn: "2019-02-04T15:19:54"},
  {id: 15300, addedOn: "2019-02-04T15:19:54"},
  {id: 15400, addedOn: "2019-02-04T15:19:54"}
]
function compare(data1,data2){
  for(let item of data1){
    if(data2.find(item2 => item2.id === item.id)) return true 
  }
  return false
}
console.log(compare(dataLog,dataLog2));

将使您的两个内部div垂直包含其内容。

display flex;
flex-direction: column;

将使您的内容（ul / img）（垂直）居中，并且

justify-content: center;

将使它们水平对齐

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;
}

Answer 2

您可以使用flex-box，请在下面查看示例

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

html在div内垂直和水平对齐内容

2 个答案: