【问题标题】:Centered responsive text居中的响应式文本
【发布时间】:2014-10-16 07:05:18
【问题描述】:

我在这里有一个 jsfiddle - http://jsfiddle.net/kw83kLmo/

这只是我需要在窗口中居中的一段文本。

文本需要设置宽度,因为我不希望它是容器的整个宽度。

当窗口变小时,文本需要保持在中心但变窄。

在此处的示例中,它保持居中并响应,直到达到 600 像素,然后保持该宽度。

我知道我已经设置了那个宽度,但我这样做是为了让它居中

<div class="container-fluid ">

    <div class="hero">

        <div class="hero_heading text-center">
            <h1>This is a heading This is a heading This is a heading </h1>
        </div>

    </div>

</div>

【问题讨论】:

  • 有什么理由使用绝对定位?

标签: html css responsive-design centering


【解决方案1】:

CSS flex 可以在包括 IE 在内的大多数流行浏览器中以兼容的方式为您施展魔法。看看这个JSFiddle

.hero{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    background-image: url(http://placehold.it/800x300);  
    background-size: cover;
    height: 400px;
}

.hero_heading h1{
    border: 1px solid red;
    color: white;
    max-width: 600px;
}

【讨论】:

    【解决方案2】:

    更新您的h1 样式,如下所示。

    .hero_heading h1 {
        border: 1px solid red;
        color: white;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        max-width: 600px;
    }
    

    DEMO

    【讨论】:

    • 在这种情况下,您也可以离开绝对位置。我对其进行了测试,但由于我的答案是上面的,所以我将对其发表评论:)
    【解决方案3】:

    我会选择:

    .hero_heading{
        border: 1px solid red;
        color: white;
        position: absolute;
        width:50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);        
        transform: translate(-50%, -50%);
    }
    

    【讨论】:

      【解决方案4】:

      JSfiddle Demo

      我从h1 上取下定位并将其放在包装div 上。

      CSS

      .hero{
        background-image: url(http://placehold.it/800x300);  
        background-size: cover;
        position: relative;
        height: 400px;
      }
      
      .hero_heading {
          border: 1px solid red;
          color: white;
          position: absolute;
          left: 50%;
          bottom: 0;
          -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
          max-width: 600px;
      }
      

      【讨论】:

        【解决方案5】:

        像这样编辑你的代码:

        .hero_heading h1{
            border: 1px solid red;
            color: white;
            margin: 0 auto;
            max-width: 600px;
            position: absolute;
            bottom: 0;
        }
        

        Demo

        【讨论】:

          【解决方案6】:

          编辑您的代码

          .hero_heading h1{
              border: 1px solid red;
              color: white;
              //top: 0; left: 0; bottom: 0; right: 0;
              width: 600px;/*added*/
              max-width:80%;/*to leave spaces around your text on responsive*/
              margin:auto;/*changed*/
          }
          

          除非你需要,否则你不需要定位你的元素来制作它

          注意:从 .hero 中删除您的 position:relative;

          DEMO

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2018-07-18
            • 1970-01-01
            • 1970-01-01
            • 2023-04-10
            • 2012-10-23
            • 2016-12-13
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多