1

我正在尝试在一个高度随宽度变化的框中垂直对齐文本（使其成为一个完美的正方形）。我只是无法让它工作。我有两个问题：

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

这是我的小提琴

这是我的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>
4

2 回答 2

4

添加这个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%;
}

归功于保罗。

于 2013-03-09T18:47:49.293 回答
2

您在类中使用强制它显示块position: absolute;的段落.smallbox，因此垂直对齐将无效。在下面的小提琴中，我使用该line-height属性来对齐.smallbox文本，尽管我认为这不适用于动态高度。

我还通过添加和使用垂直对齐的值来 使.text类段落居中。只需根据您的需要进行调整。display: inline-block;px

于 2013-03-09T13:20:54.203 回答