如何使文本居中响应 CSS HTML

Question

https://imgur.com/a/ErqGP7Y

参考图片

嘿，

所以我得到了一个网站，我可以在其中播放热门电影，但有些电影的片名比其他片长。我怎样才能使用 CSS 样式，这样我就可以使所有电影详细信息按钮显示在同一级别，然后例如与 Shang-Chi.

相比，将标题 Jurassic Hunt 居中

希望我的解释是好的。提前致谢

Answer 1

据我了解，您想将所有按钮设置在同一级别。只需简单地设置要在其中编写该段落的元素的高度。

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>StackOberFLow</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {          
        display: grid;
        grid-template-columns:repeat(4,auto);
        margin: 50px;
        border: 2px solid black;
      }
      img {
        height: 200px;
        width: 150px;
      }
      .innerbox {
        border: 2px solid red;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 500px;
        margin: 10px;
      }
      .boxelement p{
          
          height: 150px;
      }
      .boxelement{
          margin: 5px ;
          padding: 5px;
      }
      .btn{
          background-color: blueviolet;
          border-radius: 10px;
          padding: 10px 10px;
          color:white;
          border: 2px solid red;
      }
      .btn:hover{
          cursor: pointer;
          background-color: white;
          color: black;
          position: relative;
          bottom: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="innerbox">
        <div class="boxelement">
          <img
            src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
            alt="img"
          />
        </div>
        <div class="boxelement">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
            facilis.
          </p>
        </div>
        <div class="boxelement">
          <button class="btn" type="submit">Movie Details</button>
        </div>
      </div>
      <div class="innerbox">
        <div class="boxelement">
          <img
            src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
            alt="img"
          />
        </div>
        <div class="boxelement">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
          </p>
        </div>
        <div class="boxelement">
          <button class="btn" type="submit">Movie Details</button>
        </div>
      </div>
      <div class="innerbox">
        <div class="boxelement">
          <img
            src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
            alt="img"
          />
        </div>
        <div class="boxelement">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
            corrupti quasi laborum ducimus odit provident magni, molestiae
            perspiciatis nemo porro.
          </p>
        </div>
        <div class="boxelement">
          <button class="btn" type="submit">Movie Details</button>
        </div>
      </div>
      <div class="innerbox">
        <div class="boxelement">
          <img
            src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
            alt="img"
          />
        </div>
        <div class="boxelement">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis,
            quas reiciendis. Quod, modi! Aut iusto perspiciatis iure assumenda,
            nesciunt ipsa expedita omnis aliquam dolore ipsum?
          </p>
        </div>
        <div class="boxelement">
          <button class="btn" type="submit">Movie Details</button>
        </div>
      </div>
    </div>
  </body>
</html>

如您所见，我刚刚添加了 <p> 标签的高度，一切都会自动设置。

 .boxelement p{
              
              height: 150px;
          }

您可以通过复制文件并使用实时服务器打开来检查此代码。

顺便说一下，如果你知道 bootstrap 那么你可以很容易地使用 bootstrap 卡来做到这一点。在这里，一切都已经得到管理，您无需担心网站的响应能力。

如果有任何拼写错误，请不要介意。谢谢

如何使文本居中响应 CSS HTML

How to Make Text Centering Responsive CSS HTML

html

css

text-styling

web