Question

我正在尝试将文本垂直对齐在一个高度变化以匹配宽度的框中（这样它就是一个完美的正方形）。我无法让它发挥作用。我有 2个问题：

我正在尝试垂直对齐“smallbox”类中的文本。
除此之外，我也无法让“text”类垂直对齐。

这是我的fiddle

这是我的CSS：

    * {
    margin: 0;
    padding: 0;
}

html, body {
    background: yellow;
    font-size: 2.5vmin;
}

body {
    text-align: center;
}

#container {
    margin: 0 auto;
    width: 100%;
}

.box {
    /*width: 200vmin;*/
    width: 90%;
    margin: 0 auto;
    display: inline-block;
    /*padding-bottom: 5vmin;*/
    padding-bottom: 2.5%;
}
.smallbox {
    position: relative;
    float: left;
    vertical-align: middle;
    width: 16.8%;
    border-radius: 2vmin;
    font-size: 6vmin;
    text-align: center;
    word-wrap: break-word;
    display: table;
    table-layout: fixed;
    color: red;
    background-color: blue;
}
.smallbox b {
    margin-top: 100%;
    display: block;
    zoom: 1.0;
}

.smallbox p {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-decoration: none;
    display: table-cell;
    vertical-align: middle;
}
.content {
    width: 80%;
    min-height: 28vmin;
    background-color: white;
    float: right;
    border-radius: 2vmin;
    font-size: 3.5vmin;
    position: relative;
    padding-bottom: 5vmin;
}
.content:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -4.75vmin;
    top: 13.5vmin;
    border-top: 3vmin solid transparent;
    border-bottom: 3vmin solid transparent; 
    border-right: 5vmin solid white;
}
.title {
    height: 5vmin;
    padding: .75vmin 1.5vmin;
    border-radius: 2vmin 2vmin 1vmin 1vmin;
    margin: .5vmin;
    font-weight: bold;
    text-align: left;
    color: red;
    background-color: blue;
}
.text {
    padding: .5vmin 2vmin;
    text-align: center;
}
.left {
    padding: .5vmin 2vmin;
    position: absolute;
    bottom: 0;
    font-weight: bold;
}
.right {
    padding: .5vmin 2vmin;
    position: absolute;
    bottom: 0;
    right: 0;
    font-weight: bold;
    border-radius: 2vmin 2vmin 2vmin 2vmin;
    margin: .5vmin;
    color: red;
    background-color: blue;
}
.right a {
    text-decoration: none;
}
.arrowleft {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid blue; 
}

这是我的HTML：

    <!DOCTYPE html>
<html><head>
        <link rel="stylesheet" href="box.css">
    </head>
<body>
<div id="container">
        <div class="box">
                <div class="smallbox"><b></b><p>Onceuponatimeinafarawayland</p></div>
                <div class="content">
                    <div class="title">Some Title</div>
                    <div class="text"><p>This is just some example text here</p>
</div>
                    <div class="left">Left</div>
                    <a href=""><div class="right">Right</div></a>
                </div>
            </div>





</div>

</body></html>

Answer 1

添加此CSS：

.smallbox p:before{
content:" ";
display:inline-block;
vertical-align:middle;
height:100%;
width:1px;
}
.smallbox p span{
display:inline-block;
vertical-align:middle;
width:99%;
}

信用转到Paul。

Answer 2

您在position: absolute;类中的段落上使用.smallbox强制它显示块，因此vertical-align将不起作用。在下面的小提琴中，我使用line-height属性来对齐.smallbox文本，但我不认为它可以用于动态高度。

I also centered .text类段落，添加display: inline-block;并使用px值进行vertical-align。只需根据您的需要进行调整。

CSS - 垂直对齐，没有高度

2 个答案: