이미지를 가로로 정렬

Question

div에 포함 된 이미지를 가로로 정렬하려면 어떻게해야합니까? 그것은 고정 너비입니다.

예제 코드 :

HTML

<div id="random"> 
<a href=""><img src=".jpg" /><span></span></a> 
<a href=".html"><h2>Title</h2></a><p>Info</p><p>Dd/Mm/Yyyy</p> 
</div> 

CSS

#random{ 
max-width: 650px 
} 

Answer 1

보통 수평으로 아주 능숙 요소를 정렬하는 트릭을 할 수있는 수레

<div id="random"> 
    <img src="1.jpg" /> 
    <img src="2.jpg" /> 
    <img src="3.jpg" /> 
</div> 

CSS. 플로팅이 다른 페이지 레이아웃을 손상시키지 않도록 포함하는 (부모) 요소에 clearfix 클래스와 함께 해당 접합을 사용하십시오.

HTML

<div class="horiz clearfix"> 
    <div><a href="www.google.com"><img src="https://www.pathe.nl/themes/main_theme/gfx/icons/placeholder-large.png"/> 
     </a></div> 
    <div><a href="www.stackoverflow.com"><h2>Title</h2></a><p>Info</p><p>Dd/Mm/Yyyy</p></div> 
</div> 
<div class="horiz clearfix"> 
    <div><a href="www.google.com"><img src="https://www.pathe.nl/themes/main_theme/gfx/icons/placeholder-large.png"/> 
     </a></div> 
    <div><a href="www.stackoverflow.com"><h2>Title</h2></a><p>Info</p><p>Dd/Mm/Yyyy</p></div> 
</div>​ 

CSS

/* 
* Clearfix: contain floats 
* 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* `contenteditable` attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that receive the `clearfix` class. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 

.clearfix:before, 
.clearfix:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.clearfix:after { 
    clear: both; 
} 

/* 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 

.clearfix { 
    *zoom: 1; 
} 

.horiz > * { 
    float: left; 
    margin-right: 5px; 
}​ 

Answer 2

이 같은

사용 무언가 :

H TML

#random{ 
    max-width: 650px 
} 

#random img{ 
    display:inline-block; 
    width:80px; 
} 

Answer 3

.container{ 
 
    background:#d5d5d5; 
 
    } 
 
.container img{ 
 
    width:200px; 
 
    margin:0 auto; 
 
    display:block; 
 
    }

<div class="container"> 
 
    <img src="https://dummyimage.com/200X200/000/fff"/> 
 
</div>