Question

我在卡片中心有文字，但我想让文字保持在中间，但是沿着左边的笔直。这是我所拥有的形象。我想要的是

我在包含以文字为中心的卡的列上有文本中心类，但它们不在同一行。这是代码。

<div class="container">
<p>Discover</p>
<hr >
<div class="row">

    <div class="col-sm-4 text-center" >
        <div class="card ">
            <div class="card-block ">
                <div class="row">
                    <div class="col-5">
                        <img class="thumbnail" src="./assets/images/foodposter.jpg">
                    </div>
                    <div class="col-7">
                        <p style="font-weight: bold;">Snail master</p>
                        <!-- <p><i class="material-icons" style="font-size: 0.8em;">info_outline</i>In Food and Drink</p> -->
                        <p class="cardfont p-2">
                            <i class="material-icons" style="font-size: 1em;">today</i> 12 sept 2017</p>
                        <p class="cardfont p-2">
                            <i class="material-icons" style="font-size: 1em;">location_on</i>TRM,Thika Road</p>
                        <p class="cardfont p-2">
                            <i class="material-icons" style="font-size: 1em;">today</i> KSH.1200</p>
                        <p class="cardfont p-2">_</p>
                        <button  type="button" class="btn btn-outline-primary btn-2 " style="font-size: 0.8em;line-height: 80%;">Get Tickets</button>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-4" >
        <div class="card">
            <div class="card-block">
                <div class="row">
                    <div class="col-5">
                        <img class="thumbnail" src="./assets/images/comedyposter.jpg">
                    </div>
                    <div class="col-7">mate</div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-4" >
        <div class="card">
            <div class="card-block">
                <div class="row">
                    <div class="col-5">
                        <img class="thumbnail" src="./assets/images/midnightposter.jpg">
                    </div>
                    <div class="col-7">mate</div>
                </div>
            </div>
        </div>
    </div>







</div>

Answer 1

最简单的方法是使用文字左侧而不是文字中心
并给它一个新的类和左右边距，以使其在中心

<div class="row">
<div class="col-4">
Image here
</div>
<div class="col-8 text-left">
<div class="xyz">
Snail master<br>
aaaaaa<br>
aaaaaaa
</div>
</div>

.xyz{
margin:0px 30px; as per your wish to make class in centre.
}

或者你可以使用偏移

使中心对齐的内容在bootsrap 4中保持左对齐

1 个答案: