logo标签列表

CSS浮动拼图 - 文本居中问题

htmlcss
3
我已经创建了一个简单的基于float的横幅，并且类似这样的瓷砖：
我的jsfiddle代码，
但是，我在每个瓷砖中居中文本方面遇到了很大问题。 我想要所有的 "Sample text" 文本在每个瓷砖中都居中（水平和垂直），但我不知道如何实现。
我尝试了许多方法，但文本从未居中对齐。我该怎么做？
我也会在此处粘贴我的代码：
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>

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;}
3个回答
1
尝试使用这个 CSS。这将解决问题。
.block-content{
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

我尝试将其内联放置。如果您将其放在外部样式表中，请注意矛盾之处。这个效果很好。

谢谢！它有效了。但是你能解释一下为什么我必须使用translate吗？ - The Cataylyst
它已被用于根据div大小自动缩放内容。这将使文本具有响应性，即此属性指导其他属性在不同大小的<div>中如何工作。 - Nitish Kumar
1

很简单！JSFIDDLE

只需添加width:100%;并给予text-align:center;

.block:hover .block-content {
    visibility: visible;
    text-align: center;
    width: 100%;
    top: 40%;
}
0
将文本包装在 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接