Как разместить блок, как на картинке по середине страницы (Скажете если потребуется больше изображений)?

Question

[Роман Тузов]

<div class="news-container">
		        	<div class="news-border">
						<div class="img-border">
							<img src="img/bez_logo.jpg">
						</div>
						<div class="text-border">
							<div class="gg-border">
								<h1>НОВАЯ КУРткА ТОДДА ГОВАРДА: ЧТО ПОКАЗАЛА BETHESDA НА E3 2019</h1>
								<p>Как разработчики пытались вернуть доверие игроков</p>
							</div>
						</div>
					</div>
					<div class="news-border">
						<div class="img-border">
							<img src="img/bez_logo.jpg">
						</div>
						<div class="text-border">
							<div class="gg-border">
								<h1>НОВАЯ КУРТКА ТОДДА ГОВАРДА: ЧТО ПОКАЗАЛА BETHESDA НА E3 2019</h1>
								<p>Как разработчики пытались вернуть доверие игроков</p>
							</div>
						</div>
					</div>
					<div class="news-border">
						<div class="img-border">
							<img src="img/bez_logo.jpg">
						</div>
						<div class="text-border">
							<div class="gg-border">
								<h1>НОВАЯ КУРТКА ТОДДА ГОВАРДА: ЧТО ПОКАЗАЛА BETHESDA НА E3 2019</h1>
								<p>Как разработчики пытались вернуть доверие игроков</p>
							</div>
						</div>
					</div>
		        </div>



.img-border {
  width: 320px;
  height: 218px;
  display: flex;
}
.img-border img {
  float: left;
  width: 100%;
  height: 299px;
  border-radius: 9px 0px 0px 9px;
  display: flex;
}
.text-border {
  height: 218px;
  width: 383px;
}
.text-border p {
  color: #fff;
  font-size: 14px;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  float: left;
  padding-left: 15px;
}
.news-border {
  height: 300px;
  width: 700px;
  border: 1px solid #000;
  border-radius: 15px 15px 15px 15px;
  background: #fff;
  display: flex;
  margin-left: 5%;
  margin-top: 7%;
}
.gg-border h1 {
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 700;
  float: left;
  padding-left: 15px;
  padding-top: 8px;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
.gg-border p {
  color: #000;
  font-size: 14px;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  float: left;
  padding-left: 15px;
}
#footer-other {
  overflow: hidden;
  position: relative;
  background: #111;
  height: 70px;
}
.news-container {
  vertical-align: center;
}

Comments

[RAX7]

Просто добавь:

.news-border {
  margin: 7% auto 0;
}

Answer 1

[Danil Sergeev]

Можно код шапки и собственно формы "Новости" ?