将 div 居中，其中包含 svg 和文本
Center a div with an svg and text inside of it
如何将这些元素水平居中？
Fiddle: http://jsfiddle.net/qfbszLt1/
#icon-link-wrap {
float: left;
height: 30px;
margin-right: 15px;
width: 30px;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
<a href="http://example.com" target="_blank">www.example.com</a>
</div>
我为自己做
CSS
#icon-link-wrap {
height: 30px;
margin-right: 15px;
width: 30px;
margin-left: 50%;
transform: translateX(-50%);
}
希望对你有所帮助。
不要使用 float: left，而是使用 display: inline-block 并将 text-align: center 应用于父级 div (#icon-full-wrap)。
#icon-link-wrap {
display: inline-block;
vertical-align: middle;
height: 30px;
margin-right: 15px;
width: 30px;
}
#icon-full-wrap {
text-align: center;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
<a href="http://example.com" target="_blank">www.example.com</a>
</div>
如何将这些元素水平居中？
Fiddle: http://jsfiddle.net/qfbszLt1/
#icon-link-wrap {
float: left;
height: 30px;
margin-right: 15px;
width: 30px;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
<a href="http://example.com" target="_blank">www.example.com</a>
</div>
我为自己做 CSS
#icon-link-wrap {
height: 30px;
margin-right: 15px;
width: 30px;
margin-left: 50%;
transform: translateX(-50%);
}
希望对你有所帮助。
不要使用 float: left，而是使用 display: inline-block 并将 text-align: center 应用于父级 div (#icon-full-wrap)。
#icon-link-wrap {
display: inline-block;
vertical-align: middle;
height: 30px;
margin-right: 15px;
width: 30px;
}
#icon-full-wrap {
text-align: center;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
<a href="http://example.com" target="_blank">www.example.com</a>
</div>