내부에 svg 및 텍스트가있는 div를 가운데에두기

Question

이러한 요소를 가로로 가운데에 배치하는 방법은 무엇입니까?

바이올린 : 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>

Answer 1

.

#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>

Answer 2

나 자신을 위해 그것을 할 CSS

#icon-link-wrap { 
height: 30px; 
margin-right: 15px; 
width: 30px; 
margin-left: 50%; 
transform: translateX(-50%); 
} 

내가 당신에게 도움이되기를 바랍니다. 대신 float: left이 display: inline-block를 사용하고 부모 div (#icon-full-wrap)에 text-align: center을 적용 사용