Question

这就是我想要的：

https://i.stack.imgur.com/WTTMA.png

这就是我所拥有的：

https://i.stack.imgur.com/V7X6m.png

这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
    <header>

    </header>
    <main>
    <ul class="ul">
      <li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg" 
      alt="pic">Content</li>    
    </ul>
    </main>
    <footer>

    </footer>


</body>
</html>

CSS

.ul{
display: table;
margin: 0 auto;
list-style: none;
}

.li{
font-weight: bold;
font-size: 50px;
}

img{
width: 200px;
}

我尝试垂直居中对齐，但是它什么也没做，所以我尝试将其居中对齐并没有达到我想要的效果，我还尝试了柔韧性和绝对位置。

Answer 1

尝试使用flex box

.li{
font-weight: bold;
font-size: 50px;
display: flex;
align-items: center;
}

Answer 2

使用flexbox是更好的解决方案。前提是将“内容”放在单独的HTML元素内。在这种情况下，我使用了span。

.ul {
  /* display: table; */
  margin: 0 auto;
  list-style: none;
}

.li {
  font-weight: bold;
  font-size: 50px;
  display: flex; /* Added */
  align-items: center; /* Added */
}

img {
  width: 200px;
}

<header>
</header>
<main>
  <ul class="ul">
    <li class="li">
      <img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg" alt="pic">
      <span>Content</span></li>
  </ul>
</main>
<footer>
</footer>

Answer 3

使用vertical-align: middle：

.selector {
    vertical-align: middle    
}

vertical-align CSS属性设置嵌入式，嵌入式块或表格单元格的垂直对齐。

Answer 4

首先，我想欢迎您加入Stackoverflow社区。

您可以通过在CSS中使用flexbox来获得所需的结果。我将相同的HTML放在这里，只是将“内容”放在一个范围内。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
    <header>

    </header>
    <main>
    <ul class="ul">
      <li class="li"><img src="https://apod.nasa.gov/apod/image/1703/AuroraTree_Wallace_960.jpg" 
      alt="pic"><span>Content</span></li>    
    </ul>
    </main>
    <footer>

    </footer>


</body>
</html>

将 display：flex; 和 align-items：center; 添加到您的.li选择器，如下所示。


.ul{
display: table;
margin: 0 auto;
list-style: none;
}

.li{
font-weight: bold;
font-size: 50px;
display:flex;
align-items: center;
}

img{
width: 200px;
}

希望我的回答对您有所帮助。

如何在表格单元格中垂直居中放置内容

4 个答案: