相关疑难解决方法(0)
如何在div中垂直对齐文本？
我试图找到最有效的方法来将文本与div对齐.我尝试了一些东西,似乎都没有用.
.testimonialText {
position: absolute;
left: 15px;
top: 15px;
width: 150px;
height: 309px;
vertical-align: middle;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
padding: 1em 0 1em 0;
}<div class="testimonialText">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse …1102
推荐指数
推荐指数
19
解决办法
解决办法
157万
查看次数
查看次数
div内的垂直对齐跨度
<div class="container">
<span>Some text, yay</span>
</div>
<div class="container">
<span>Some text, yay. But shit time, there is alot of text, so we get a problem with breaking lines and the given height :( How can I align vertical now?</span>
</div>
<style>
.container {
width: 100%;
height: 50px;
line-height: 50px;
border: 1px solid black;
}
.container span {
padding-left: 30px;
}
</style>
这个解决方案效果很好,直到屏幕宽度太小 - 将我的文本分成几行.
当我谷歌问题时,我发现了许多疯狂的过于复杂的解决方案,使用javascript和div来推送我的内容.任何人都可以帮助我在没有添加更多标记的情况下完成这项工作吗？:)
无需支持Internet Explorer和旧版浏览器.
谢谢
16
推荐指数
推荐指数
2
解决办法
解决办法
7万
查看次数
查看次数
div垂直对齐不起作用
搜索了各种 文章之后，我无法vertical-align: middle在div中工作。
所期望的结果是什么，都float: left存在于div属性中：
________ _______
| | | |
| lorem | | ipsum |
|________| |_______|
.tile {
float: left;
width: 50%;
min-height: 50px;
text-align: center;
background-color: blue;
}
#nav {
display: table;
}
.middle {
display: table-cell;
vertical-align: middle;
background-color: red;
}<div class="tile" id="nav">
<div class="tile middle">lorem</div>
<div class="tile">ipsum</div>
</div>我究竟做错了什么？除非像本文中所述是不可能的。
2
推荐指数
推荐指数
1
解决办法
解决办法
4212
查看次数
查看次数
如何在CSS之前或之后垂直居中内容
我目前在重新设计Bootstrap警报方面遇到了一些麻烦.我不认为它与Font Awesome相关,也不是Bootstrap.
我们的想法是在块上添加左侧,并在之前添加图标.它工作但图标不是垂直居中.当右侧包含多条线时,它变得更加丑陋.
在两个图像中:
这就是我得到的
这就是我要的
运行代码段以查看到目前为止我实现的目标.
.alert {
position: relative;
background: #3498db;
border: none;
padding: 15px 20px 15px 120px;
text-align: left;
}
.alert:before {
content: "\f129";
font-family: FontAwesome;
display: block;
width: 100px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #34495e;
text-align: center;
color: #fff;
font-size: 2.5em;
vertical-align: middle;
}<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="alert">
<p>
Intellectum est enim mihi quidem in multis, et maxime in me ipso.<br />
Ille …1
推荐指数
推荐指数
1
解决办法
解决办法
689
查看次数
查看次数