如何使文本居中响应 CSS HTML [关闭]答案

【问题标题】：How to Make Text Centering Responsive CSS HTML [closed]如何使文本居中响应 CSS HTML [关闭]
【发布时间】：2021-11-13 07:07:05
【问题描述】：

https://imgur.com/a/ErqGP7Y

参考图片

嘿，

所以我有了一个网站，我可以在其中展示热门电影，但有些电影的标题比其他的要长。如何使用 CSS 样式，以便我可以使所有电影详细信息按钮出现在同一级别，然后与上气相比，例如将标题 Jurassic Hunt 居中。

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

【问题讨论】：

标签： html css web text-styling

【解决方案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;
          }

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

顺便说一句，如果您知道引导程序，那么您只需使用引导程序卡就可以很容易地做到这一点。在这里，一切都已得到管理，您无需担心网站的响应速度。

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

【讨论】：

是这样，但我也想垂直对齐文本
使外盒弯曲并设置align-item:center;和justify-content:center;