Question

我试图将一些文本连成一行。我觉得这不应该是这么困难，我很困惑为什么它不起作用。

产品图（实施例）

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.10.0/Draft.js"></script>

<div id="react-root"></div>

＆＃13;

#title_img {
  background-image: url(http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg);
  height: 180px;
  width: 180px;
  margin: 0 auto;
}
#title_img_holder {
  padding-top: 5%;
  float: none;
  margin: 0 auto;
}
#title_holder {
  text-align: center;
}

＆＃13;

我正在使用最新版本的boostrap 4

Answer 1

添加此CSS：

#title_holder h2 {
    margin: 0 auto;
}

（你必须将h2置于其父容器中心）

http://codepen.io/anon/pen/QpqQYq

Answer 2

目前，display: flex .title_holder覆盖了<h2>自动填充其父级的全部宽度的能力。一个简单的解决方法是设置.title_holder h2 { width: 100%; }，然后文本内容将居中。

#title_img {
        background-image: url(http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg);
        height: 180px;
        width: 180px;
        margin: 0 auto;
    }
    
    #title_img_holder {
        padding-top: 5%;
        float: none; 
        margin: 0 auto;
    }
    
    #title_holder {
        text-align: center;
    }
    
    #title_holder h2 {
        width: 100%;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" id="header_con">
            <div class="container">
                <div class="row" id="title_img_holder"> <img src="http://cdn.playbuzz.com/cdn/UserImages/4343091c-c906-457b-b885-77675c22c92f.jpg" class="mx-auto" alt="Smiley face" height="180" width="180"> </div>
                <div class="row" id="title_holder">
                    <h2 class="text-center">We fix screens.
      <small class="text-muted">Not for free though</small>
    </h2> </div>
            </div>
        </div>

无法将某些文本置于Bootstrap行中

2 个答案: