如何将标题与图标水平居中，忽略图标

我正在使用flexbox将标题居中放置一个图标。我试图将标题的文本部分完全居中，忽略图标。文本居中后，图标应该添加到标题的右侧。我尝试使用绝对定位，但它并不完全正常工作，因为当浏览器宽度变小时，我还需要打包标题。如何将标题与图标水平居中，忽略图标

在我的示例中，整个标题居中。图标在那里，它抛弃了文本的中心。

HTML

<div class="container"> 
    <div class="wrapper"> 
    <div class="image"></div> 
     <div class="heading"> 
     <span class="title">racecar racecar racecar</span> 
     <span class="fa fa-lg fa-car"> 
     </span> 
     </div> 
     <div class="description"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor dolor, varius a convallis ut, tincidunt non turpis. Nam gravida. 
     </div> 
    </div> 
    <div class="wrapper"> 
    <div class="image"></div> 
     <div class="heading"> 
     <span class="title">kayak kayak kayak</span> 
     <span class="fa fa-lg fa-car"> 
     </span> 
     </div> 
     <div class="description"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod efficitur. Quisque vitae gravida dolor. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue. 
     </div> 
    </div> 
    <div class="wrapper"> 
    <div class="image"></div> 
     <div class="heading"> 
     <span class="title">rotor rotor rotor</span> 
     <span class="fa fa-lg fa-car"></span> 
     </div> 
     <div class="description"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue. 
     </div> 
    </div> 
</div>

CSS

.wrapper { 
    border: 1px solid red; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 

.image { 
    height: 100px; 
    width: 100px; 
    background-color: blue; 
    border-radius: 65px; 
} 

.title { 
    font-size: 50px; 
} 

.description { 
    padding: 15px; 
}

jsfiddle

来源

2016-12-03 user4584963

由于柔性容器的空间分布对齐的项目，当你只是一个侧面有一个项目这会造成一种不平衡，将一个居中的兄弟姐妹抛出中心。一种解决方案是创建一个图标的副本，放在相反的（左侧），'visibility：hidden'。这将平衡事情。这里有一个完整的解释和其他选项：http://stackoverflow.com/q/38948102/3597276 –

看到我更新的答案。 –

您是否需要使用flexbox，或者其他方法也可以（如果有效）？另外，如果文本包装为2行，您希望图标最终位于何处？ – andi

你的问题是有点误导。您的真正问题发生在标题内，泰国不是一个弹性元素。

你可以只添加一个利润率左图像的大小相同的这个元素：

.heading { 
 
    margin: 0px 30px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.fa { 
 
    position: absolute; 
 
    right: -30px; 
 
    top: 30px; 
 
} 
 

 
.wrapper { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.image { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: blue; 
 
    border-radius: 65px; 
 
} 
 
.title { 
 
    font-size: 50px; 
 
} 
 
.description { 
 
    padding: 15px; 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="image"></div> 
 
    <div class="heading"> 
 
     <span class="title">racecar racecar racecar</span> 
 
     <span class="fa fa-lg fa-car"> 
 
     </span> 
 
    </div> 
 
    <div class="description"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor dolor, varius a convallis ut, tincidunt non turpis. Nam gravida. 
 
    </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="image"></div> 
 
    <div class="heading"> 
 
     <span class="title">kayak kayak kayak</span> 
 
     <span class="fa fa-lg fa-car"> 
 
     </span> 
 
    </div> 
 
    <div class="description"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod efficitur. Quisque vitae gravida dolor. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia 
 
     nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue. 
 
    </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="image"></div> 
 
    <div class="heading"> 
 
     <span class="title">rotor rotor rotor</span> 
 
     <span class="fa fa-lg fa-car"></span> 
 
    </div> 
 
    <div class="description"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod 
 
     bibendum. Duis congue. 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-12-03 20:00:08 vals

这样一个简单的答案，除了使浏览器宽度变窄（导致文字换行）时看起来很棒。我忘了将'text-align：center'添加到'.heading'中。我很怀疑，但是在换行发生后能否保持文本的精确居中？ – user4584963

我已添加文本对齐，并定位绝对图像。对齐方式可以修改，以更好地适合您要的结果 – vals

您可以通过设置.fa的.heading内解决这个浮动权并且具有负的右边距（与元素的字体大小相同）：

.heading .fa { 
    float: right; 
    margin-right: -1.33333333em; 
    margin-top: -30px; 
}

I还需要设置margin-top以确保元件的位置正确。

只是为了举例 - 我在悬停时添加了display:none，表明图标不影响文本居中。你应该将其删除:)

这里是一个工作示例：

.wrapper { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.image { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: blue; 
 
    border-radius: 65px; 
 
} 
 

 
.title { 
 
    font-size: 50px; 
 
} 
 

 
.description { 
 
    padding: 15px; 
 
} 
 
.heading .fa { 
 
    float: right; 
 
    margin-right: -1.33333333em; 
 
    margin-top: -30px; 
 
} 
 
.heading:hover .fa { 
 
    display: none; 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="wrapper"> 
 
    <div class="image"></div> 
 
    <div class="heading"> 
 
     <span class="title">racecar racecar racecar</span> 
 
     <span class="fa fa-lg fa-car"> 
 
     </span> 
 
    </div> 
 
    <div class="description"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor dolor, varius a convallis ut, tincidunt non turpis. Nam gravida. 
 
    </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="image"></div> 
 
    <div class="heading"> 
 
     <span class="title">kayak kayak kayak</span> 
 
     <span class="fa fa-lg fa-car"> 
 
     </span> 
 
    </div> 
 
    <div class="description"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque euismod efficitur. Quisque vitae gravida dolor. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia 
 
     nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod bibendum. Duis congue. 
 
    </div> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <div class="image"></div> 
 
    <div class="heading"> 
 
     <span class="title">rotor rotor rotor</span> 
 
     <span class="fa fa-lg fa-car"></span> 
 
    </div> 
 
    <div class="description"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce et dui quis arcu sagittis sodales. Vivamus tincidunt orci et neque pulvinar, a aliquam diam tristique. Curabitur lacinia nibh est, id cursus ligula mollis eu. Nullam suscipit nisi vel euismod 
 
     bibendum. Duis congue. 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-12-03 22:01:32 Dekel

感谢您的答案。它看起来很棒，直到我使浏览器的宽度变小。当标题封装时，它会变得中断，因为图标不会停留在标题的末尾。 – user4584963

当屏幕较小时，您需要决定如何操作。也许改变字体大小？ – Dekel

如何将标题与图标水平居中，忽略图标

回答

相关问题