css - 我的外部容器如何正确对齐所有内部元素？

Question

我正在尝试正确对齐所有容器的 ( div) 内部元素。每个元素应该一个在一个之上（而不是内联/相邻）。

你知道我的容器如何使video,img和audio元素右对齐吗？

  .container {
    text-align: right;
  }

  .container > * {
    display: block; // so every child element is on a new line
    max-width: 150px;
  }

<h4>All the below should be right aligned</h4>
<div class="container">
     <p>A p element</p>
     <a href="">An anchor element</a>
     <span>A span element</span>
     <label>A label element</label>
     <img src="https://via.placeholder.com/150">
     <video controls="controls" poster="https://via.placeholder.com/150"></video>
     <audio controls="controls"><source src="http://www.archive.org/download/1001_questions_grammar_2009_librivox/1001grammar_01_hathaway_128kb.mp3" type="audio/mpeg"></audio>
     <hr>
</div>

Answer 1

通过设置为尝试使用具有垂直方向的 flexbox，然后通过设置flex-direction为将column它们向右对齐。align-itemsflex-end

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.container > * {
  max-width: 150px;
}

<h4>All the below should be right aligned</h4>
<div class="container">
     <p>A p element</p>
     <a href="">An anchor element</a>
     <span>A span element</span>
     <label>A label element</label>
     <img src="https://via.placeholder.com/150">
     <video controls="controls" poster="https://via.placeholder.com/150"></video>
     <audio controls="controls"><source src="http://www.archive.org/download/1001_questions_grammar_2009_librivox/1001grammar_01_hathaway_128kb.mp3" type="audio/mpeg"></audio>
     <hr>
</div>