居中的响应式文本

Posted 2023-03-05

【中文标题】居中的响应式文本

【英文标题】：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>

【问题讨论】：

有什么理由使用绝对定位？

【参考方案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