描述'垂直align”屬性及其典型用例

CSS中的垂直對齊屬性在垂直方向對齊或表格元件。 1。它使用基線，中間，超級和子等值之類的值來調整文本線中的圖像或形式輸入。 2。在表單元格中，它控制了與頂部，中間或底部值的內容對齊，通常在模擬表佈局中使用。 3。具有形式元素，應用垂直 - 對齊：中間有助於對齊複選框或帶有標籤的按鈕，從而在瀏覽器上保持一致的外觀。

CSS中的vertical-align特性控制元素相對於彼此的垂直對齊方式。通常用於調整內聯或表格元素的位置，例如文本中的圖像或表中的單元格。雖然看起來很簡單，但它通常會使開發人員感到困惑，因為它的行為不像text-align的垂直對應物。

vertical-align如何與內聯元素一起工作

vertical-align的最常見用途之一是對齊內聯元素，例如文本行中的圖像，圖標或形式輸入。

• 默認值是baseline ，該值將元素的底部與父文本的基線保持一致。
• 如果您希望圖像在一條線中較高（例如上標），則可以使用vertical-align: super 。
• 相反，對於下標對準， vertical-align: sub效果很好。

例如：

 <p>這是一些文本，帶有<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175348653671022.jpeg"  class="lazy"  src =“ icon.png” style =“垂直align：middle;” alt="描述'垂直align”屬性及其典型用例" > inline映像。 </p>

使用vertical-align: middle有助於將圖像垂直與周圍的文本居中。

請記住： vertical-align僅影響內聯和表格元素 - 默認情況下，它不會在<div>（例如<div>上執行任何操作。

對齊表單元格中的內容

當使用表佈局（或以表單元為單元格式樣式的元素）時， vertical-align對於控制內容如何在單元格中的位置特別有用。

• 默認情況下，表單元格中的內容與頂部對齊（ vertical-align: top ）。
• 如果要在單元格內垂直以垂直居中的文本或元素，請使用vertical-align: middle 。
• 對於底部對齊， vertical-align: bottom是您的首選。

當您使用CSS模擬顯示表佈局時，這也適用display: table和display: table-cell 。

例子：

 <div style =“ display：table;高度：100px; width：200px;”>
  <div style =“ display：table-cell; vertical-align：中間;”>
    垂直集中的內容
  </div>
</div>

此技術通常用於較舊的佈局，或者在不使用Flexbox或網格的情況下構建需要垂直居中的響應式組件時。

使用vertical-align與形式元素

當將標籤或其他內線內容旁邊放置時， <input> ， <select>和<button>之類的表單控件有時會看起來不對。

• 添加vertical-align: middle可以幫助它們與周圍的文本或圖標更好地對齊。
• 根據瀏覽器默認樣式，您可能仍然需要調整線高或填充。

例如：

 <Label>
  <輸入type =“複選框” style =“垂直align：中間;”>檢查我
</label>

這有助於確保複選框與標籤文本保持良好狀態，而不是看起來太高或低。

概括

vertical-align屬性很有用，但經常被誤解。它最適合內聯元素和表單元格，非常適合將文本與圖像對齊，居中在表單元格或微調形式元素中。

這不是通用的垂直中心工具 - 對於全垂直居中的塊級容器，您需要使用flexbox或網格。

但是對於那些小型的內聯調整， vertical-align是工作的正確工具。

以上是描述'垂直align”屬性及其典型用例的詳細內容。更多資訊請關注PHP中文網其他相關文章！