使用float:left实现并排布局时如何居中左侧文本并保留页面响应性

解决方案 #

你原有代码的问题在于float: left会让元素脱离常规文档流，同时你没有给.links设置明确的高度，导致flex的垂直居中属性align-items: center无法触发，同时.desc的固定百分比左边距也会在不同设备下出现适配问题。

我们可以直接将父容器<a class="linkurl">设为flex布局，完全抛弃float属性，既能保留两栏并排效果，也能轻松实现左侧文本居中，同时保证响应性。

修改后的CSS代码 #

/* 给父容器加flex布局，实现两个子元素并排 */
.linkurl {
  display: flex;
  gap: 20px; /* 控制左右两个盒子的间距，可按需调整 */
  flex-wrap: wrap; /* 小屏幕下自动换行，保证响应性 */
  align-items: center; /* 可选：让左右两个盒子垂直居中对齐 */
}

.links {
  font-weight: bold; 
  font-size: large; 
  min-width: 100px;
  text-align: center; /* 水平居中内部文本 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.desc {
  text-align: justify;
  margin-right: 5px;
  flex: 1; /* 让描述盒子自动占满剩余宽度 */
}

优化后的HTML代码（仅移除冗余的清除浮动元素） #

<figure class="linkbox">
  <a class="linkurl" href="http://www.deckchair.com/" target="blank">
    <div class="links">Deckchair</div>
    <div class="desc">Text content</div>
  </a>
</figure>

效果说明 #

• 左侧.links内的文本会自动在盒子区域内水平+垂直居中
• 右侧描述框自动占满剩余宽度，自适应不同屏幕尺寸
• 屏幕宽度不足时两个盒子会自动换行，不会出现布局错乱，完全保留响应性

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