1

高さが幅に合わせて変化するボックス内のテキストを垂直方向に揃えようとしています(完全な正方形になるように)。私はそれを機能させることができません。2 つの問題があります。

  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%;
}

功績はPaulにあります。

于 2013-03-09T18:47:49.293 に答える
2

position: absolute;ブロックを強制的に表示するクラス内の段落で使用して.smallboxいるため、垂直方向の配置は効果がありません。以下のフィドルでは、line-heightプロパティを使用してテキストを揃えました.smallboxが、動的な高さでは機能しないと思います。

また、vertical-alignの値を追加して使用することで 、.textクラスの段落を中央に配置しました。必要に応じて調整してください。display: inline-block;px

于 2013-03-09T13:20:54.203 に答える