html — Текст не по центру экрана, уходит немного вправо из-за картинки, как исправить?

Задать вопрос

Вопрос задан

Изменён 1 год 10 месяцев назад

Просмотрен 66 раз

Как сделать так чтобы текст был ровно по центру, а не уходил чуть в право как на картинке? Он уходит вправо из-за картинки, но можно это как-то исправить не убирая картинку?

.logo {
    height: 48px;
    margin-left: 50px;
}
.title2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.title {
    text-align: center;
    width: 100%;
    background-color: #2D3844;
    color: #FFF;
    height: 48px;
    text-shadow: 1px 1px 3px black, 0 0 14px white;
    display: flex;
    flex-wrap: wrap;
}

 
<header>
    <a href="https://www. hltv.org"><img src="Images/hltv.png"></a>
    <h2>TOP OF HLTV USERS BY COMMENTS</h2>
</header>
  • html
  • css

Сделать хедеру такой же отступ справа, который занял блок слева.

body {
  font-size: 35%;
}
.logo {
  height: 48px;
  margin-left: 50px;
}
.title2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.title {
  text-align: center;
  width: 100%;
  background-color: #2D3844;
  color: #FFF;
  height: 48px;
  text-shadow: 1px 1px 3px black, 0 0 14px white;
  display: flex;
  flex-wrap: wrap;
  /*  */
  padding-right: 98px;
  box-sizing: border-box;
}
<header>
  <a href="https://www.hltv.org"><img src="Images/hltv.png"></a>
  <h2>TOP OF HLTV USERS BY COMMENTS</h2>
</header>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Адаптивное выравнивание изображений на всю ширину браузера

08. 02.2019

11057

В закладки

Простой пример как адаптивно выстроить несколько изображений на всю ширину окна браузера.

1

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
</div>

HTML

.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 50%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

CSS

2

<div>
	<a href="#"><img src="https://snipp. ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>	
</div>

HTML

.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 33.3%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

CSS

3

<div>
	<a href="#"><img src="https://snipp.ru/img/city-1.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.
 
 ru/img/city-2.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-3.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-4.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-5.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-6.jpg" alt=""></a>	
	<a href="#"><img src="https://snipp.ru/img/city-7.jpg" alt=""></a>
	<a href="#"><img src="https://snipp.ru/img/city-8.jpg" alt=""></a>	
</div>

HTML

.photos {
	text-align: center;
	margin: 0 0 20px 0;
	overflow: hidden;    
}
.photos a {
	width: 25%;
	display: block;
	float: left;
	line-height: 0;
}
.photos img {
	width: 100%;
	height: auto;
}

CSS

4

Добавим стили, которые выведут фото по вертикали на мобильных с шириной экрана до 800px.

@media screen and (max-width: 800px) {
	.photos a {
		width: 100%;
		float: none;
	}
}

CSS

08.02.2019, обновлено 27.08.2019

11057

#Background #CSS #HTML #Изображения

В закладки

Другие публикации

Модальное окно на затемненном фоне

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет…

Адаптивные блоки YouTube

Видео YouTube вставляется через iframe, но он не адаптивен по высоте. Если задать, то он растянется на всю ширину родителя, но для высоты hight=»100%» не работает.

html — Как центрировать изображения на веб-странице для всех размеров экрана

спросил

11 лет, 10 месяцев назад

Изменено 3 года, 1 месяц назад

Просмотрено 238 тысяч раз

У меня проблема с HTML. Я искал во всем Интернете, но до сих пор нет реального ответа.

У меня есть веб-сайт с несколькими изображениями, и я хочу, чтобы они были посередине. Теперь на моем экране они находятся посередине, но это потому, что я поместил их туда, переместив в одну сторону. Когда мои друзья смотрят на него, изображение смещается от центра.

Вот сайт; если у вас 13,5-дюймовый экран, он будет выглядеть посередине. 4

Попробуйте сделать так…

 

<изображение/>

2

text-align:center

Применение стиля text-align:center к элементу, содержащему элементы, приведет к центрированию этих элементов.

 <дел>
  CSS `выравнивание текста: по центру`

Томас Шилдс упоминает этот метод0038 к блочному элементу отцентрирует его внутри элемента, в котором он находится.

 

  <дел>
    CSS `margin:0 auto`, чтобы установить левое и правое поля для центрирования блочного элемента внутри другого элемента.