Question

我想使用css，bootstrap将第一行对齐左对齐，第二行将以第一行的文本长度为中心。

我尝试了很多方法，但没有。

代码跟随

             <div class="col-md-6">
                <a href="/" style="text-decoration:none">
                    <div class="col-md-12 row-eq-height" style="padding:0;">
                        <div class="col-md-2" style="padding:0">
                            <img src="/Content/images/logo.png" class="img-responsive" alt="">
                        </div>
                        <div class="col-md-10 tex-center" style="padding-right:0;">
                            <div style="padding:0">
                                <div class="line1-bold">THIS IS THE FIRST LONG HEADLINE</div>
                                <div class="line2">THIS IS THE SECOND HEADLINE</div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

Answer 1

这样的东西？我不知道你的任务，但我删除了一些标签。

CSS

.img-responsive {
  width: 100px;
  float: left;
}
span {
  display: block;
}

HTML

<div class="col-md-6">
                <a href="/" style="text-decoration:none">
                    <div class="col-md-12 row-eq-height" style="padding:0;">
                            <img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" alt="">
<span class="text-left">THIS IS THE FIRST LONG HEADLINE</span>
<span class="text-center">THIS IS THE SECOND HEADLINE</span>
                    </div>
                </a>
            </div>

Reference Link

Answer 2

尝试将等级text-center添加到您的div。

这是一个有效的pen。

Answer 3

请检查..

＆＃13;

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 


<div class="col-md-6">
                <a href="/" style="text-decoration:none">
                    <div class="col-md-12 row-eq-height" style="padding:0;">
                        <div class="col-xs-2" style="padding:0">
                            <img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" style="width:100px" alt="">
                        </div>
                        <div class="" style="float:left;">
                         <div class="line1-bold" style="color:#b63957; font-size:18px;">THIS IS THE FIRST LONG HEADLINE</div>
                                <div class="line2" style="color:#b63957; font-size:16px; text-align:center;">THIS IS THE SECOND HEADLINE</div>
                        
                        </div>
                        
                        
                    </div>
                </a>
            </div>

＆＃13;

Bootstrap css通过另一个div的文本长度将文本与中心对齐

3 个答案: