css垂直居中div与容器内的图像

-2

我想尝试使包含左侧图像的div垂直居中。我尝试了很多东西，但我一直在遇到问题。css垂直居中div与容器内的图像

weekly-middle是div的容器div，它是left，它包含我想要居中的图像。

该文本已居中。

.weekly-middle { 
 
    text-align: center; 
 
    width: 100%; 
 
    /* \t height:100%;*/ 
 
    border: none; 
 
    border-collapse: collapse; 
 
    margin: 0px; 
 
    padding-top: 56px; 
 
    padding-bottom: 56px; 
 
    content: ""; 
 
    display: table; 
 
    /*clear: both;*/ 
 
} 
 

 
.left { 
 
    text-align: left; 
 
    padding: 20px; 
 
    width: 100px; 
 
    float: left; 
 
    /* \t padding-top: 56px; 
 
\t padding-bottom: 56px;*/ 
 
    vertical-align: middle; 
 
    height: 300px 
 
} 
 

 
.right { 
 
    margin-left: 100px; 
 
    float: left; 
 
    padding-top: 56px; 
 
    padding-bottom: 56px; 
 
}

<div class="weekly-middle teal"> 
 
    <div class="left"> 
 
    <img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" /> 
 
    </div> 
 
    <div class="right"> 
 
    <h1>Some Title</h1> 
 
    <p class="title">Problems Solved</p> 
 
    </div> 
 
</div>

来源

2017-04-25 mcv

代替：'显示：table'使用'显示：内联块;'，则'vertial对齐：middle'将工作;） – Troyer

，该被标记的问题作为一个副本是不是远程类似于这个问题... –

@mcv你正在尝试使用'display：table'，但为了做到这一点，你还需要有一些元素的包装内'显示：表cell'。你有一张桌子，但没有牢房。你也不应该在左列中明确声明一个高度。最后，不要浮动列。一旦你有'display：table-cell'，他们就会相应排队：https：//jsfiddle.net/L8txsvLx/ –

使用Flexbox的。这是一个非常强大的CSS工具：

.left { 
    text-align: left; 
    padding: 20px; 
    width: 100px; 
    float: left; 
    /* padding-top: 56px; 
    padding-bottom: 56px;*/ 
    vertical-align: middle; 
    height: 300px; 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
}

来源

2017-04-25 14:40:15

好，但如果我删除高度？ – mcv

基本上，你不能在没有指定高度的div中垂直对齐项目！ –

你可以试试下面的代码

<div class="left"> 
    <div class="display-table"> 
     <div class="display-table-cell"> 
<img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" /> 
     </div> 
</div>

，并为CSS可以这样写：

.display-table{ 
    display: table; 
    width:100%; 
} 
.display-table-cell{ 
     display:table-cell; 
     vertical-align: middle; 
     text-align:left; 
     height: 100px;// your choose 
}

来源

2017-04-25 14:40:41

因为我在这里编写代码，请检查任何拼写错误。谢谢 –

我在左边应用了'display：table-cell'，它工作正常。 – mcv

添加到您的CSS ，希望它有帮助：

.weekly-middle img { 
margin-top:50%; 
}

.weekly-middle { 
 
    text-align: center; 
 
    width: 100%; 
 
    /* \t height:100%;*/ 
 
    border: none; 
 
    border-collapse: collapse; 
 
    margin: 0px; 
 
    padding-top: 56px; 
 
    padding-bottom: 56px; 
 
    content: ""; 
 
    display: table; 
 
    /*clear: both;*/ 
 
    
 
} 
 
.weekly-middle img { 
 
margin-top:50%; 
 
} 
 

 
.left { 
 
    text-align: left; 
 
    padding: 20px; 
 
    width: 100px; 
 
    float: left; 
 
    /* \t padding-top: 56px; 
 
\t padding-bottom: 56px;*/ 
 
    vertical-align: middle; 
 
    height: 300px 
 
} 
 

 
.right { 
 
    margin-left: 100px; 
 
    float: left; 
 
    padding-top: 56px; 
 
    padding-bottom: 56px; 
 
}

<div class="weekly-middle teal"> 
 
    <div class="left"> 
 
    <img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" /> 
 
    </div> 
 
    <div class="right"> 
 
    <h1>Some Title</h1> 
 
    <p class="title">Problems Solved</p> 
 
    </div> 
 
</div>

来源

2017-04-25 14:41:04

我想你应该能够只从内部的div删除“左”和“右”的类，它会工作。

看看你在找什么在下面。

.weekly-middle { 
 
    text-align: center; 
 
    width: 100%; 
 
    /* \t height:100%;*/ 
 
    border: none; 
 
    border-collapse: collapse; 
 
    margin: 0px; 
 
    padding-top: 56px; 
 
    padding-bottom: 56px; 
 
    content: ""; 
 
    display: table; 
 
    /*clear: both;*/ 
 
} 
 

 
.left { 
 
    text-align: left; 
 
    padding: 20px; 
 
    width: 100px; 
 
    float: left; 
 
    /* \t padding-top: 56px; 
 
\t padding-bottom: 56px;*/ 
 
    vertical-align: middle; 
 
    height: 300px 
 
} 
 

 
.right { 
 
    margin-left: 100px; 
 
    float: left; 
 
    padding-top: 56px; 
 
    padding-bottom: 56px; 
 
}

<div class="weekly-middle teal"> 
 
    <div class=""> 
 
    <img width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png" /> 
 
    </div> 
 
    <div class=""> 
 
    <h1>Some Title</h1> 
 
    <p class="title">Problems Solved</p> 
 
    </div> 
 
</div>

来源

2017-04-25 14:41:05 Zach

我认为他希望它垂直居中。 –

是的，除了右边的div之外，w是左边的div。 – mcv

css垂直居中div与容器内的图像

回答

相关问题