如何用自定义CSS在WordPress Hive主题中对齐Logo与文本并换行标语

针对你遇到的问题，仅通过CSS即可实现副标题单独换行，以下是具体代码和说明：

核心思路 #

保持Logo与右侧文本的横向对齐，同时让副标题强制独占一行，脱离主标题的行内布局。

具体代码 #

/* 维持Logo与文本区域的横向对齐 */
.site-branding {
  display: flex;
  align-items: center; /* 让Logo和文本垂直居中 */
  gap: 1.2rem; /* 可根据需求调整Logo与文本的间距 */
}

/* 强制副标题独占一行 */
.site-branding .site-description {
  display: block;
  margin-top: 0.6rem; /* 调整副标题与主标题的上下间距 */
  font-size: 0.9em; /* 可选：调整副标题字号，增强层次 */
}

/* 如果主标题原本是行内元素，设置为块级确保布局稳定 */
.site-branding .site-title {
  display: block;
}

适配说明 #

• 假设使用WordPress默认的主标题类.site-title、副标题类.site-description，如果Hive主题用了自定义类名，替换为对应类即可。
• 如果主标题和副标题被包裹在同一个子容器内，可给该子容器添加垂直排列规则：

.site-branding .branding-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 保持文本左对齐 */
}

内容的提问来源于stack exchange，提问作者GhostRider