对齐容器内图像旁边的文本

时间：2021-06-12 01:20:07

标签： html css flexbox

What I'm trying to recreate

刚接触 CSS+HTML 并尝试练习我迄今为止开发的“技能”。

我花了很多时间试图让文本对齐，但它不会。

Here's what i've had achieved so far

这本身就花了很长时间才弄清楚如何像这样对齐四张卡片。 我仍然不知道如何对齐这个文本。

这是我的 HTML：

<body>
<div class="burger-layout">
    <div class="burger-item">
        <h2>HFC Classic</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with dill pickles,
            cos lettuce & egg mayo.</span>
        <ul>
            <li class="kj">2800Kj</li>
            <li class="price">$14.50</li>
            <li class="Details">More Details</li>
        </ul>
        <img src="hfc.png" alt="" class="burgerimg">

    </div>

    <div class="burger-item">
        <h2>HFC Hot</h2>

        <span class="burger-description">RSPCA Approved chicken, cooked
            in extra virgin olive oil with our Hawthorn
            Hot Sauce, jalapeños, slaw, shredded carrot, Spanish onion & egg mayo.</span>
        <ul class="burgerfooter">
            <li class="kj">2910Kj</li>
            <li class="price">$15.90</li>
            <li class="Details">More Details</li>
        </ul>
        <img src="hot.png" alt="" class="burgerimg">

    </div>

    <div class="burger-item">
        <h2>HFC Smokey</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with chipotle
            mayo, dill pickles, slaw & Spanish onion.</span>
        <ul>
            <li class="kj">2700Kj</li>
            <li class="price">$15.50</li>
            <li class="Details">More Details</li>
        </ul>
        <img src="smokey.png" alt="" class="burgerimg">

    </div>

    <div class="burger-item">
        <h2>HFC Blat</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with crispy bacon,
            avocado, cos lettuce, tomato & herbed mayo.</span>
        <ul>
            <li class="kj">2600Kj</li>
            <li class="price">$15.90</li>
            <li class="Details">More Details</li>
        </ul>
        <img src="blat.png" alt="" class="burgerimg">

    </div>



</div>

到目前为止，这是我的 CSS ：（注意：我知道这里没有缩进，它在我的 IDE 中是正确的）

body {
display: flex; 
justify-content: center;
align-items: center;
min-width: 10vh;

}

.burger-layout{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 10px;
}
.burger-item {
border: 1px grey solid;
border-radius: 10px;
max-width: 537px;
max-height: 210px;




}

.burgerimg {
display: flex;
display: inline-block;
max-width: 100px;
max-height: 100px;
padding: 10px 10px;


}

.burger-description {

 }

2 个答案:

答案 0 :(得分：2)

将 image 和 info 包裹到两个不同的容器中并使用 flex。

因为您想将布局分成 2 部分。假设 left 和 right。

Left 是包含图像的图像，因为我们需要提供宽度和高度以及一些填充，这就是您需要将其包装到容器中的原因。您可以在不包装它的情况下执行此操作，然后您必须使用 margin 在外部容器和图像之间留出一些空间。

同样，Right 是包含信息的那个。你想把容器切成两部分。

<块引用>

Flexbox 仅在 horizontally 或 vertically 的一个方向上起作用。 flexbox 容器的所有直接子项都是 flex-items。根据 flex-direction，弹性项目被相应地放置。在你的情况下，图像和其他信息应该并排，所以我将它们包装在不同的容器中。如果您不将所有文本容器包装成一个，那么它们都按照您的指示并排或从上到下排列。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 10vh;
}

.burger-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 10px;
}

.burger-item {
  display: flex;
  border: 1px grey solid;
  border-radius: 10px;
  max-width: 537px;
  max-height: 210px;
}

.image-container {
  padding: 1rem;
}

img.burgerimg {
  height: 100%;
}

.info-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-container ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  gap: .5rem;
}

.Details {
  color: red;
  font-weight: 600;
}
<div class="burger-layout">
  <div class="burger-item">
    <div class="image-container">
      <img src="https://picsum.photos/200" alt="" class="burgerimg">
    </div>
    <div class="info-container">
      <div>
        <h2>HFC Classic</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with dill pickles,
              cos lettuce & egg mayo.</span>
      </div>
      <ul>
        <li class="kj">2800Kj</li>
        <li class="price">$14.50</li>
        <li class="Details">More Details</li>
      </ul>
    </div>
  </div>
  <div class="burger-item">
    <div class="image-container">
      <img src="https://picsum.photos/200" alt="" class="burgerimg">
    </div>
    <div class="info-container">
      <div>
        <h2>HFC Classic</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with dill pickles,
              cos lettuce & egg mayo.</span>
      </div>
      <ul>
        <li class="kj">2800Kj</li>
        <li class="price">$14.50</li>
        <li class="Details">More Details</li>
      </ul>
    </div>
  </div>
  <div class="burger-item">
    <div class="image-container">
      <img src="https://picsum.photos/200" alt="" class="burgerimg">
    </div>
    <div class="info-container">
      <div>
        <h2>HFC Classic</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with dill pickles,
              cos lettuce & egg mayo.</span>
      </div>
      <ul>
        <li class="kj">2800Kj</li>
        <li class="price">$14.50</li>
        <li class="Details">More Details</li>
      </ul>
    </div>
  </div>
  <div class="burger-item">
    <div class="image-container">
      <img src="https://picsum.photos/200" alt="" class="burgerimg">
    </div>
    <div class="info-container">
      <div>
        <h2>HFC Classic</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with dill pickles,
              cos lettuce & egg mayo.</span>
      </div>
      <ul>
        <li class="kj">2800Kj</li>
        <li class="price">$14.50</li>
        <li class="Details">More Details</li>
      </ul>
    </div>
  </div>
  <div class="burger-item">
    <div class="image-container">
      <img src="https://picsum.photos/200" alt="" class="burgerimg">
    </div>
    <div class="info-container">
      <div>
        <h2>HFC Classic</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with dill pickles,
              cos lettuce & egg mayo.</span>
      </div>
      <ul>
        <li class="kj">2800Kj</li>
        <li class="price">$14.50</li>
        <li class="Details">More Details</li>
      </ul>
    </div>
  </div>
  <div class="burger-item">
    <div class="image-container">
      <img src="https://picsum.photos/200" alt="" class="burgerimg">
    </div>
    <div class="info-container">
      <div>
        <h2>HFC Classic</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with dill pickles,
        cos lettuce & egg mayo.</span>
      </div>
      <ul>
        <li class="kj">2800Kj</li>
        <li class="price">$14.50</li>
        <li class="Details">More Details</li>
      </ul>
    </div>
  </div>
</div>

答案 1 :(得分：1)

您需要将除 img 之外的所有内容包装在单独的 div 中 你需要为你的“.burger-item”添加flex，你需要为你的“.burgerimg”更改一些样式

但我建议你改变一些东西，然后自己试验

工作代码：

   <div class="burger-layout">
    <div class="burger-item">
            <div class="wraper">   <!-- new div that wraps all except img -->
        <h2>HFC Classic</h2>
        <span class="burger-description">RSPCA Approved chicken, cooked in extra virgin olive oil with dill pickles,
            cos lettuce & egg mayo.</span>
        <ul>
            <li class="kj">2800Kj</li>
            <li class="price">$14.50</li>
            <li class="Details">More Details</li>
        </ul>
    </div>  <!-- end of ned div -->

        <img src="./tommaso-teloni-o9E5dEiOw_o-unsplash.jpg" alt=""    class="burgerimg">
    </div>


  body {
display: flex; 
justify-content: center;
align-items: center;
min-width: 10vh;

}

.burger-layout{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 10px;
}

.burger-item {
border: 1px grey solid;
border-radius: 10px;
max-width: 537px;
max-height: 210px;

flex-direction: row-reverse;   /* new */  

display: flex;  /* new */   
align-items: center;  /* new */
justify-content: space-around;  /* new */

}


.burgerimg {
display: flex;
display: inline-block;
max-width: 300px;  /* new */
max-height: 300px; /* new */
padding: 10px 10px;

width: 40%;  /* new */
height: 100%;  /* new */ 

}
相关问题
最新问题