CSS中的行上下居中是一個非常重要且常用的功能。它可以讓文本、圖像和其他元素在其包含的容器中始終處于中心位置。下面是一些示例代碼,演示如何實現CSS行上下居中:
/* 使內容垂直居中 */ .container { display: flex; align-items: center; justify-content: center; height: 200px; } /* 使文本垂直居中 */ .text { display: flex; align-items: center; justify-content: center; } /* 使圖片垂直居中 */ .image { display: flex; align-items: center; justify-content: center; } .image img { vertical-align: middle; }
使用以上代碼,你可以輕松地將內容、文本和圖片垂直居中。記得始終使用display: flex屬性并將其與align-items和justify-content屬性一起使用。同時,對于圖片,你還需要使用vertical-align: middle屬性。這些技巧將幫助你實現完美的CSS行上下居中效果。
上一篇css首字符縮進