Html,css -картинки по вертикали

346

10 января 2018, 16:24

Нужно чтобы картинки были по центру,но все ни как не получается...

*{font-family: 'Planet N', arial;text-decoration: none;} 
/* ВЕРХНЯЯ ПАНЕЛЬ (ПОЛОСКА)*/ 
.clearfix:after { 
	content:''; 
	display:table; 
	width:100%; 
	clear:both; 
} 
body{margin: 0 auto;padding: 0;} 
div { 
	box-sizing: border-box; 
} 
 
header { 
	background: url(../img/1.jpg) no-repeat center top / cover; 
	 
	height: 100vh; 
} 
 
.container { 
	width: 930px; 
	margin: 0 auto; 
} 
 
.logo { 
	margin-top: 41px; 
	float: left; 
} 
 
nav { 
	float: right; 
	margin-top: 45px; 
} 
 
.menu { 
	padding: 0; 
	margin: 0; 
	display: block; 
} 
 
.menu li { 
	float: left; 
	display: block; 
	margin-right: 41px; 
} 
 
.menu a { 
	color: #fff; 
	text-decoration: none; 
	text-transform: uppercase; 
	font-size: 14px; 
} 
 
.titles__first { 
	font-size: 40px; 
	color: #fff; 
	text-transform: uppercase; 
	text-align: center; 
	margin-top: 150px; 
	  
} 
 
h1 { 
	font-size: 75px; 
	color: #fff; 
	text-transform: uppercase; 
	text-align: center; 
	margin: 15px; 
	padding-top: 60px; 
} 
.button{background: #fed136; 
	color: #484543; 
	border-radius: 3px; 
	display: block; 
	width: 240px; 
	padding: 20px 0; 
	margin: 0 auto; 
	text-decoration: none; 
	text-align: center; 
	text-transform: uppercase; 
	font-weight: bold; 
	font-size: 25px; 
	margin-top: 50px;} 
.title{padding-top: 115px;} 
 
 
.title h2{font-size: 40px;font-weight: bold;text-transform: uppercase;margin: 0; 
	text-align: center;} 
 
.title p{color:#777777;font-size: 20px;text-align: center;margin-top: 10px;} 
 
.servises_item{width: 270px;float:left; text-align: center;} 
 
.servises_item p{color:#777777;font-size: 20px;line-height: 1.9em;} 
 
.servises_item h3{font-size: 18px;margin-bottom: 15px;}	 
 
.servises_item:last-child{float: right;} 
 
.servises_item:nth-child(2){margin-left: 60px;} 
 
.servises{margin-top: 80px;} 
 
#portfolio{background: #F7F7F7;padding-bottom: 120px;} 
 
#servises{padding-bottom: 120px;} 
 
.works img{float: left;} 
 
.works img:last-child{float: right;} 
 
.works img:nth-child(2){margin-left: 23px;} 
.humble{margin-top: 80px;width:200px; text-align: center;} 
.humble_item p{color:#777777;font-size: 15px;} 
.humble h2{font-size: 15px;} 
.humble_item img{margin-right:200px;} 
footer {text-align: center;padding-top:100px;}

<section id="humble" > 
		<div class="container"> 
		<div class="title"> 
			<h2>Обо мне</h2> 
		<p> 
		Сейчас придумаю ...	 
		</p> 
		</div> 
		<div class="humble clearfix"> 
			<div class="humble_item "> 
		<img src="assets/img/about1.jpg"> 
		<img src="assets/img/about2.jpg"> 
		<img src="assets/img/about3.jpg"> 
	</div> 
			<div class="humble_item">	 
			<h2>July 2010</h2> 
			<h2>Our humble beginnigs</h2> 
			<p>TUTA PEZDA WASHE</p> 
		</div> 
		<div class="humble_item">	 
			<h2>Junaty 2011</h2> 
			<h2>Our humble beginnigs</h2> 
			<p>TUTA PEZDA WASHE</p> 
		</div> 
		<div class="humble_item">	 
			<h2>december 2012</h2> 
			<h2>Our humble beginnigs</h2> 
			<p>TUTA PEZDA WASHE</p> 
		</div> 
	</div> 
</div> 
	</section>

Answer 1

Ваш пример нормально посмотреть не получилось, так как у картинок инвалидный путь, но если вам необходимо какие-то блоки разместить по центру экрана, то это можно сделать так.

.container { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  width: 100%; 
} 
 
.item { 
  background-color: green; 
  width: 200px; 
  height: 100px; 
  margin: 4px; 
}

<div class="container"> 
  <div class="item">1</div> 
  <div class="item">2</div> 
  <div class="item">3</div> 
  <div class="item">4</div> 
  <div class="item">5</div> 
</div>

Answer 2

Так и не понял как и относительно чего "по центру" Вам надо. Если заменить вашу строку

.humble_item img{margin-right:200px;}

на

.humble_item img{width:100%;height:100%;}

так расположится ?

? так по центру :

*{font-family: 'Planet N', arial;text-decoration: none;} 
/* ВЕРХНЯЯ ПАНЕЛЬ (ПОЛОСКА)*/ 
.clearfix:after { 
	content:''; 
	display:table; 
	width:100%; 
	clear:both; 
} 
body{margin: 0 auto;padding: 0;} 
div { 
	box-sizing: border-box; 
} 
 
header { 
	background: url(../img/1.jpg) no-repeat center top / cover; 
	 
	height: 100vh; 
} 
 
.container { 
	width: 930px; 
	margin: 0 auto; 
} 
 
.logo { 
	margin-top: 41px; 
	float: left; 
} 
 
nav { 
	float: right; 
	margin-top: 45px; 
} 
 
.menu { 
	padding: 0; 
	margin: 0; 
	display: block; 
} 
 
.menu li { 
	float: left; 
	display: block; 
	margin-right: 41px; 
} 
 
.menu a { 
	color: #fff; 
	text-decoration: none; 
	text-transform: uppercase; 
	font-size: 14px; 
} 
 
.titles__first { 
	font-size: 40px; 
	color: #fff; 
	text-transform: uppercase; 
	text-align: center; 
	margin-top: 150px; 
	  
} 
 
h1 { 
	font-size: 75px; 
	color: #fff; 
	text-transform: uppercase; 
	text-align: center; 
	margin: 15px; 
	padding-top: 60px; 
} 
.button{background: #fed136; 
	color: #484543; 
	border-radius: 3px; 
	display: block; 
	width: 240px; 
	padding: 20px 0; 
	margin: 0 auto; 
	text-decoration: none; 
	text-align: center; 
	text-transform: uppercase; 
	font-weight: bold; 
	font-size: 25px; 
	margin-top: 50px;} 
.title{padding-top: 115px;} 
 
 
.title h2{font-size: 40px;font-weight: bold;text-transform: uppercase;margin: 0; 
	text-align: center;} 
 
.title p{color:#777777;font-size: 20px;text-align: center;margin-top: 10px;} 
 
.servises_item{width: 270px;float:left; text-align: center;} 
 
.servises_item p{color:#777777;font-size: 20px;line-height: 1.9em;} 
 
.servises_item h3{font-size: 18px;margin-bottom: 15px;}	 
 
.servises_item:last-child{float: right;} 
 
.servises_item:nth-child(2){margin-left: 60px;} 
 
.servises{margin-top: 80px;} 
 
#portfolio{background: #F7F7F7;padding-bottom: 120px;} 
 
#servises{padding-bottom: 120px;} 
 
.works img{float: left;} 
 
.works img:last-child{float: right;} 
 
.works img:nth-child(2){margin-left: 23px;} 
.humble{margin-top: 80px;width:200px; text-align: center;} 
 
.humble_item p{color:#777777;font-size: 15px;} 
.humble h2{font-size: 15px;} 
 
/* Заменил и добавил цвет для наглядности. */ 
/* .humble_item img{margin-right:200px;}   */ 
.clearfix, .humble_item img{width:100%;height:100%;background-color:lightgreen;} 
 
 
footer {text-align: center;padding-top:100px;}

<body> 
<section id="humble"> 
<div class="container"> 
		     <div class="title"> 
		     	<h2>Обо мне</h2> 
		     	<p>Сейчас придумаю ...</p> 
		     </div> 
		     <div class="humble clearfix"> 
			    <div class="humble_item"> 
	          <img src="http://www.syntaxxx.com/wp-content/uploads/2014/01/intro-to-css3-logo-300.png"> 
	          <img src="http://www.syntaxxx.com/wp-content/uploads/2015/01/08-WP-Auto-Affiliate-Links-580x180.jpg"> 
	          <img src="http://www.syntaxxx.com/wp-content/uploads/2015/01/introduction-to-mobile-design-usability-580x435.jpg">    	            </div> 
			    <div class="humble_item">	 
			      <h2>July 2010</h2> 
			      <h2>Our humble beginnigs</h2> 
			      <p>TUTA PEZDA WASHE</p> 
		        </div> 
		        <div class="humble_item">	 
			      <h2>Junaty 2011</h2> 
			      <h2>Our humble beginnigs</h2> 
			      <p>TUTA PEZDA WASHE</p> 
		        </div> 
		        <div class="humble_item">	 
			      <h2>december 2012</h2> 
			      <h2>Our humble beginnigs</h2> 
			      <p>TUTA PEZDA WASHE</p> 
		        </div> 
	         </div> 
</div> 
</section> 
</body>