將圖片定位在左側，但文本居中

我想讓我的picture.png恰好位于標題“功能區”的最左側，并且文本以功能區為中心（無論圖片是否存在）。我一直在努力使用 CSS 和彈性盒子來實作這種效果。在這里，我使用了一些引導類，但這.heading是我的類。

話雖如此，實際上是否有可能在不使用 flexbox 的情況下完成所有這些對齊，但是更自然和簡單的東西？比如可能來自 CSS1 的東西，沒有那些彈性盒子？

HTML：

        <div class="container-sm">
          <div class="card-body">
            <div class="heading">
              <img class="rounded img-fluid" src="picture.png" alt="...">
              <div class="name"><h4>Web server monitoring and maintenance.</h4>
              <div>Monitoring and upgrades.</div></div>
            </div>
          </div>
       </div>

CSS：

.heading {
    background-color: rgba(15, 156, 199, 0.829);
    height: 5%;
    display: flex;
    text-align: center;
    justify-content: space-between; /* not helpful of course */
}

這就是我想要實作的目標。我通過人為添加以下 CSS 代碼來做到這一點：

.name {
    margin-right: 31%;
}

當然，我希望這是自然居中的，而不是人為的。

uj5u.com熱心網友回復：

TL;博士。讓你.name也成為一個flex容器。

請參閱下面的代碼片段。除了占位符影像，我沒有編輯 HTML。主要的 CSS 更改是在.name類中使其成為flex容器并使其內容垂直居中。此外，它的父.heading樣式進行了一些調整以使其正常作業。

.heading {
  background-color: rgba(15, 156, 199, 0.829);
  height: 5%;
  display: flex;
  text-align: center;
}

img {
  width: 50px;
  height: 50px;
  flex: 0;
}

.name {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h4, div {
  margin: 0;
  padding: 0;
  line-height: 1;
}

<div class="container-sm">
  <div class="card-body">
    <div class="heading">
      <img class="rounded img-fluid" src="https://picsum.photos/50" alt="...">
      <div class="name">
        <h4>Web server monitoring and maintenance.</h4>
        <div>Monitoring and upgrades.</div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

Bootstrap 依靠 Flexbox 進行對齊和布局。所以避免使用它會很奇怪。

這是一個代碼片段，可以幫助您實作您想要做的事情。

有用的網址：

Bootstrap Flexbox：Flexbox 實用程式類

CSS 彈性盒：MDN 彈性盒檔案

.heading {
    background-color: rgba(15, 156, 199, 0.829);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-sm">
  <div class="card-body">
    <div class="heading d-flex text-center">
      <img class="rounded img-fluid" src="picture.png" alt="...">
      <div class="name flex-grow-1">
        <h4>Web server monitoring and maintenance.</h4>
        <p>Monitoring and upgrades.</p>
      </div>
    </div>
  </div>
</div>

注意： Bootstrap 是關于預制組件和實用程式類的，因此請盡量避免撰寫自定義 CSS。這樣做的另一個缺點是你在重復自己，并使 Bootstrap 在你使用它的方式上毫無用處。

uj5u.com熱心網友回復：

使用彈性盒

img,.image {
height:50px;
}
.box {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: center;
  height:50px;
  
}
.text-wrapper{
   background-color: rgba(15, 156, 199, 0.829);
  width:100%;
  height:50px;
  display: flex;
    flex-direction: column;
    justify-content: center;
}
.container{
  padding:5px;
}
*{
  margin:0px;
  padding:0px;
}

<div class="container">
  <div class="box">
    <div class="image">
      <img src="https://placekitten.com/640/360" alt="...">
    </div>
    <div class="text-wrapper">
    <div class="text">
      <h4>Web server monitoring and maintenance.</h4>
      <p>Monitoring and upgrades.</p>
      </div>
    </div>
  </div>
</div>

標籤：html css 弹性盒 中央

上一篇：使用css時如何將文本保持在兩行？

下一篇：類似Github的問題創建寫入/預覽布局