我很可能很容易解決問題。我有一個無序列表和3個項目內的響應divs。在一個div內部垂直列表中心
我已經設法將其居中居中,但垂直是我掙扎的地方。
<div class="left">
<div class="boxtext">
<div class="insidetext">
<ul>
<li>WATER</li>
<li>JUICE</li>
<li>TEA</li>
</ul>
</div>
</div>
</div>
.left {
@include aspect-ratio(16,9);
width: 50%;
height: 100vh;
min-width: 300px;
position: relative;
background-size: cover;
background-color:#333;
position: relative;
}
@media (max-width:768px) {
.left {
width: 100%;
height: 70vh;
}
}
.boxtext {
@include aspect-ratio(16,9);
border: solid white 0.15em;
height: 70vh;
width: 70%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
@media (max-width:768px) {
.boxtext {
width: 70%;
height: 70%;
}
}
.insidetext {
@include aspect-ratio(16,9);
background-color: aliceblue;
height: 70%;
width: 70%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 9vh;
text-align: center;
min-height:100px;
}
.insidetext li {
list-style-type:none;
}
.insidetext ul {
display: table;
margin: 0 auto;
}
.insidetext ul,li {
list-style-type: none;
list-style-position:inside;
margin:0 auto;
padding:0;
vertical-align:middle;
}
這裏是一個測試:http://jsfiddle.net/qq3LLop8/
對我來說看起來不錯,如果你真的想讓你的文字變小,那麼圖片變小 –
但是.insidetext裏面的文字不在中間 – user29200