如何在列中居中图像？ [复制]答案

【问题标题】：How do I center the image in the column? [duplicate]如何在列中居中图像？ [复制]
【发布时间】：2020-06-19 20:29:08
【问题描述】：

所以，我正在尝试创建这个容器，左侧有一个图像，中间有一个标题和描述，右侧有一个按钮，但我似乎无法将图像放在第一列的中心还是最后一列的按钮，这是为什么呢？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container m-5 mx-auto"  style="background-color: gray;">
            <div class="row">
                <div class="col-md-2">
                    <img class="rounded mt-10" style="height: 75px;" src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL.jpg" />
                </div>

                <div class="col-md-8">
                    <h5 class="card-title mt-2">Title</h5>
                    <p>Description</p>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>

【问题讨论】：

你写过自定义 CSS 吗？

标签： javascript html css twitter-bootstrap bootstrap-4

【解决方案1】：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container m-5 mx-auto"  style="background-color: gray;">
            <div class="row">
                <div class="col-md-2" style="text-align:center">
                    <img class="rounded mt-10" style="height: 75px;" src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL.jpg" />
                </div>

                <div class="col-md-8">
                    <h5 class="card-title mt-2">Title</h5>
                    <p>Description</p>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>

您可以简单地添加 text-align: center

【讨论】：

【解决方案2】：

请参阅下面的 sn-p 以获取 flex 解决方案。

.row {
  display: flex;
  flex: auto;
  align-items: center;
  justify-content: center;
}
.col-md-2 {
  display: flex;
  justify-content: center;
}
.col-md-8 {
  display: flex;
  flex-direction: column;
  text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container m-5 mx-auto"  style="background-color: gray;">
            <div class="row">
                <div class="col-md-2">
                    <img class="rounded mt-10" style="height: 75px;" src="https://cdn.mos.cms.futurecdn.net/otjbibjaAbiifyN9uVaZyL.jpg" />
                </div>

                <div class="col-md-8">
                    <h5 class="card-title mt-2">Title</h5>
                    <p>Description</p>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-primary">Button</button>
                </div>
            </div>
        </div>

【讨论】：