如何將標題與圖標水平居中，忽略圖標

我正在使用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

如何將標題與圖標水平居中，忽略圖標

回答

相關問題