如何按元素的水平對齊文本？

我有以下 HTML 結構：

如何使用自適應方式而不是使用負邊距和位置來做到這一點？

uj5u.com熱心網友回復：

而不是使用divs 使用pseudo元素。做這樣的事情：

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.content {
  padding: 2rem 0;
  position: relative;
  display: flex;
  margin: 0 2rem;
  padding-left: 1.5rem;
  flex-direction: column;
  font-family: Inter, sans-serif;
}

.content .title {
  display: flex;
  align-items: center;
}

.content .title:not(:first-child) {
  margin-top: 1.25rem;
}

.content .title::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: red;
}

.content p {
  position: relative;
  line-height: 1.5;
}

.content p::before {
  content: "";
  position: absolute;
  top: 0;
  left: -16.5px; /* because the width of line is 1px */
  width: 1px;
  height: 100%;
  background-color: red;
}

<div class="content">
  <h2 class="title">Friday 7, 2010</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>

  <h2 class="title">Thursday 12, 2014</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet tempore facere delectus maiores excepturi, ducimus, rem, commodi fugiat quam nisi aliquam vel quos. Ipsa cupiditate ratione beatae fugit adipisci explicabo saepe, dolor asperiores cum
    voluptates mollitia laudantium hic aperiam impedit?</p>
    
    <h2 class="title">Monday 30, 2019</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet tempore facere delectus maiores excepturi, ducimus, rem</p>
</div>

uj5u.com熱心網友回復：

這是使用更少標記的策略（我通常更喜歡）。它主要依賴于偽元素和左填充。

.content {
  padding-left: 10px; /* space for bigger dots */
}

.content .text {
  padding-top: 10px; /* instead of bottom margin on the title */
  margin-bottom: 20px; /* space between content blocks */
}

.content .title,
.content .text {
  position: relative;
  padding-left: 20px; /* space for the border elements */
}

.content .title:before,
.content .title:after,
.content .text:after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  transform: translateX(-50%); /* bring it left half width of the line to center it */
  background: red;
}

.content .title:before {
  transform: translate(-50%, -50%); /* up and left half the diameter of the circle to center it */
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.content .title.bigger-dot:before {
  width: 18px;
  height: 18px;
}

.content .title:after,
.content .text:after {
  width: 2px;
}

.content .text:after {
  top: 0;
}

<div class="content">
  <div class="title">Header</div>
  <div class="text">Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question?</div>
</div>

<div class="content">
  <div class="title bigger-dot">Header</div>
  <div class="text">Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question? Also, edit your previous questions to improve
    formatting and clarity.Wait! Some of your past questions have not been well-received, and you're in danger of being blocked from asking any more. For help formulating a clear, useful question, see: How do I ask a good question? Also, edit your previous
    questions to improve formatting and clarity.</div>
</div>

uj5u.com熱心網友回復：

您需要將對齊文本和紅色圓圈放入一個 div 并給該 div

 .div {
    display: flex;
    align-items: center;
   }

標籤：html css

上一篇：替換intellij中單引號內的所有html路徑

下一篇：在類方法中訪問Javascript類欄位