Question

我创建了简单的基于浮动的横幅广告，其中包含以下内容：

My code on jsfiddle，
但是我在每个瓷砖中居中文本都有一个大问题。我希望所有“示例文本”文本都集中在每个图块（水平和垂直），但我不知道如何实现这一点..

我尝试过很多方法，但文字从来都不是很好。我怎么能这样做？

我也会在这里粘贴我的代码：
HTML文件

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    </head>
    <body>

        <div id="page-content">
          <div id="banner-wrapper">
            <div class="column left-col">

              <div class="block block-25">
                <div class="overlay"></div>
                  <div class="block-content">Sample text</div>
              </div>

              <div class="block block-24">
                <div class="block-content">Sample text</div>
              </div>

              <div class="block block-22">
                <div class="block-content">Sample text</div>
              </div>

              <div class="block block-21">
                <div class="block-content">Sample text</div>
              </div>
            </div> <!--Column left END -->
            <div class="column right-col">

              <div class="block block-23">
                <div class="block-content">Sample text</div>
              </div>
            </div><!--Column right END -->
          </div> <!--Banner wrapper END -->
    </div>
    </body>
</html>

CSS文件

body {font-family:  margin:0;}
#page-content {max-width: 1220px; margin: 0 auto; position:relative;}

/* banner */
#banner-wrapper {overflow:hidden; padding:0px; margin: 0px;}
.column {height:442px;float:left;}
#banner-wrapper .left-col {width: 65.5%}
#banner-wrapper .right-col {width:34.5%}

.horizontal-line-top {height:4px; background-color: #3e7213; border: 0px;}
.horizontal-line-bottom {height:4px; background-color: #609732; border: 0px;}

.block {position:relative;float:left;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 2px solid #fff;}
.block-25 {background-color:blue;border-left: 0px;border-top:0px; width:40%; height:50%;}
.block-24 {width:60%;background-color:blue; height:50%;border-top:0px; }
.block-22 {border-bottom:0px; border-left: 0px;width:28%;;background-color:blue; height:50%;}
.block-21 {border-bottom:0px;width:72%;background-color:blue; height:50%;}
.block-23 {border-right: 0px;width:100%;background-color:blue; height:100%;border-top:0px; border-bottom:0px;}

.block-content { position: absolute;color:#fff;visibility:hidden;float:none; margin:0 auto;}

.block:hover > .overlay {float:left; width:100%;height:100%;background-color:#000;opacity:0.5;}
.block:hover .block-content {visibility:visible;}

Answer 1

尝试使用此CSS。这将解决问题。

package.json

我尝试将其放入内联。如果你把它放在外部表格中，那么请注意矛盾。这很有效。

Answer 2

简单一个！ JSFIDDLE

只需添加width:100%;并提供text-align:center;

即可

.block:hover .block-content {
    visibility: visible;
    text-align: center;
    width: 100%;
    top: 40%;
}

Answer 3

将文本换行到span元素并将其显示为块元素。然后，您可以使用transform属性居中元素。请看一下我的代码：

body {font-family:  margin:0;}
#page-content {max-width: 1220px; margin: 0 auto; position:relative;}

/* banner */
#banner-wrapper {overflow:hidden; padding:0px; margin: 0px;}
.column {height:442px;float:left;}
#banner-wrapper .left-col {width: 65.5%}
#banner-wrapper .right-col {width:34.5%}

.horizontal-line-top {height:4px; background-color: #3e7213; border: 0px;}
.horizontal-line-bottom {height:4px; background-color: #609732; border: 0px;}

.block {position:relative;float:left;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 2px solid #fff;}
.block-25 {background-color:blue;border-left: 0px;border-top:0px; width:40%; height:50%;}
.block-24 {width:60%;background-color:blue; height:50%;border-top:0px; }
.block-22 {border-bottom:0px; border-left: 0px;width:28%;;background-color:blue; height:50%;}
.block-21 {border-bottom:0px;width:72%;background-color:blue; height:50%;}
.block-23 {border-right: 0px;width:100%;background-color:blue; height:100%;border-top:0px; border-bottom:0px;}

.block-content { position: absolute;color:#fff;visibility:hidden;float:none; margin:0 auto; width:100%; height:100%;}

.block-content span { display:block; position:relative; top:50%; transform: translateY(-50%); text-align:center }

.block:hover > .overlay {float:left; width:100%;height:100%;background-color:#000;opacity:0.5;}
.block:hover .block-content {visibility:visible;}

		<div id="page-content">
          <div id="banner-wrapper">
            <div class="column left-col">

              <div class="block block-25">
                <div class="overlay"></div>
                  <div class="block-content"><span>Sample Text</span></div>
              </div>

              <div class="block block-24">
                <div class="block-content"><span>Sample Text</span></div>
              </div>

              <div class="block block-22">
                <div class="block-content"><span>Sample Text</span></div>
              </div>

              <div class="block block-21">
                <div class="block-content"><span>Sample Text</span></div>
              </div>
            </div> <!--Column left END -->
            <div class="column right-col">

              <div class="block block-23">
                <div class="block-content"><span>Sample Text</span></div>
              </div>
            </div><!--Column right END -->
          </div> <!--Banner wrapper END -->
    </div>

CSS浮动马赛克 - 文本居中问题

3 个答案: