在我自己的非WP網站中，我使用Bootstrap處理列。這是我第一次在沒有Bootstrap的情況下嘗試CSS定位。
這是由WordPress產生的HTML：
<div class="site-branding"/span>>
<a href="https://misc-ramblings. com/" class="custom-logo-link" rel="home" aria-current="page">
< img width="240" 高度="110" src="https: //misc-ramblings. com/wp-content/uploads/2021/09/cropped-misc_ramblings_logo_16x9. gif" class="custom-logo" alt="Miscellaneous Ramblings"/>
</a>/span>
<h1 class="site-title">
<a href="https://misc-ramblings. com/" rel= home">Miscellaneous Ramblings</a>
</h1>/span>
<p class="site-description">半隨機的思考，有力的分析& amp;對上帝、人類、流行文化的精辟評論&政治</p>
</div>/span>
這是我之前嘗試這個問題時，回答者好心提供的CSS。順便說一下，這些是我自定義CSS中這些HTML元素的唯一定位規則。
.site-branding {
display: grid;
grid-template-columns: auto 1fr;
justify-content: space-between;
align-items: center;
text-align: right;
}
.custom-logo-link {
grid-row: 1/3;
}
.site-title, .site-description {
align-self: end;
margin: 0;
}
.site-description {
grid-column: 2;
}
.custom-logo {
width: 300px;
最大寬度：無。
}
這就是我所得到的結果。
因此，我的問題的垂直定位部分已經得到解決，標志和文本元素現在彼此垂直對齊，但由于某些原因，文本元素仍然沒有對齊到頁面容器的右側（使用網站橫幅影像作為視覺參考，以確定該邊緣在哪里）。
我怎樣才能糾正這個問題？
uj5u.com熱心網友回復：
只要在.site-branding樣式中添加width: 100%;。它將使你的頭像頁面容器一樣大。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/331813.html
標籤：
上一篇：如何對整數字串陣列求和？
下一篇：如何從陣列字串中洗掉一些特殊字符