Тег по центру: Тег HTML выравнивание текста по центру

html — Как сделать чтобы тег a и тег span встали по центру каждый в мобильной версии

Вопрос задан 6 лет 5 месяцев назад

Изменён 6 лет 2 месяца назад

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

Как сделать чтобы тег a и тег span встали по центру каждый в мобильной версии.

    <div>
        <div>
            <div>
                <div>                      
                    <a href="http://adelfi.kz/">
                        <img alt="Brand" src="img/logo_new-300x212.png">
                    </a>
                    <span>АДЕЛЬФИ<br><p>LUXURY FURNITURE</p></span>
                </div>
            </div>
        </div>
    </div>

css

@media only screen and (max-width : 768px) {
.  top_text p{    
    text-align: center;
}   

}

• html
• css

1

Что бы стал по центру, можно сделать его блочным и выровнять

a{
  display:block;
  margin:0 auto;
}

2

Скорее всего вам надо выровнять по центру картинку?))
1. для тега a — display:block; text-align:center; width:100%;
2. для ВЛОЖЕННОГО img — display:block; margin:0 auto;
3. для тега span — display:block; text-align:center; width:100%;
ну а дальше у вас каша, так как тег p внутрь span несемантично
кроме того, у вас скорее всего применяются еще какие-то дополнительные правила, особенно касается тега p судя по рисунку, есть отступы.

Примените следующие стили:

<style>@media only screen and (max-width : 768px) {
.logo a{    
    text-align: center
}
.
  logo img{    
    display:none
}
}
</style>

и следующий код ХТМЛ:

<div>                      
<a href="http://adelfi.kz/"><img src="img/logo_new-300x212.png" alt="Brand" /><p><span>АДЕЛЬФИ LUXURY FURNITURE</span></p></a>
</div>

Указание элемента p внутри span вызывает ошибку валидации. И роль span не понятна из предложенного кода. Если этот элемент не важен, то лучше устранить его их кода.

.logo { text-align: center; }

Так же, внутрь <span> нельзя вставлять блочный элемент <p>

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

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

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

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

Почта

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

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

Почта

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

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

html — Как выровнять input по центру?

не получается выровнять по центру форму.

form {
	display: block;
	background: #5B3C67;
	padding: 50px;
	width: 100%;
	color: white;
	margin-right: auto;
	margin-left: auto;
}

form input {
	text-align: center;
	padding: 10px;
	margin-bottom: 20px;
	//margin-left: 40%;
	width: 23%;
	height: 15px;
	border: 1px solid #ff8c00;
}

.button {
	width: 20%;
	font-size: 14pt;
	color: white;
	background: #7F113E;
	height: 55px;
	padding: 10px;
	border: 1px solid #F5C4AB;
}

.button:hover {
	border: 1px solid white;
}

<section>

			<div>

				<form action="send.php" method="post">
					<h2>Свяжитесь с нами</h2>
					<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваше имя" required><br>
					<input type="text" name="email" size="15" maxlength="20" value="" placeholder="Ваш e-mail" required><br>
					<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваш телефон" required><br>
					
					<input type="submit" name="Submit" value="Отправить"><br>

				</form>

			</div>

		</section>

• html
• css
• css3

0

не нужно добавлять у самих input-ов text-align:center, полезнее у родителя:

form {text-align:center;}

по поводу одинаковой ширины — определить у input и button

width: 25%;

только еще у input добавить

box-sizing: border-box;

чтобы padding не влияли на ширину

form {
  display: block;
  background: #5B3C67;
  padding: 50px;
  width: 100%;
  color: white;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

form input {
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 20px;
  //margin-left: 40%;
  width: 25%;
  height: 35px;
  border: 1px solid #ff8c00;
}

.
  button {
  width: 25%;
  font-size: 14pt;
  color: white;
  background: #7F113E;
  height: 55px;
  padding: 10px;
  border: 1px solid #F5C4AB;
}

.button:hover {
  border: 1px solid white;
}

<section>

  <div>

    <form action="send.php" method="post">
      <h2>Свяжитесь с нами</h2>
      <input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваше имя" required><br>
      <input type="text" name="email" size="15" maxlength="20" value="" placeholder="Ваш e-mail" required><br>
      <input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваш телефон" required><br>

      <input type="submit" name="Submit" value="Отправить"><br>

    </form>

  </div>

</section>

С flex

.center {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 10px 20px;
}
form {
	background: #5B3C67;
	padding: 50px;
	color: white;
	margin-right: auto;
	margin-left: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

form input {
	text-align: center;
	padding: 10px;
	margin-bottom: 20px;
	//margin-left: 40%;
	width: 23%;
	height: 15px;
	border: 1px solid #ff8c00;
  width: 150px;
}

.
  button {
	width: 20%;
	font-size: 14pt;
	color: white;
	background: #7F113E;
	height: 55px;
	padding: 10px;
	border: 1px solid #F5C4AB;
  width: 200px;
}

.button:hover {
	border: 1px solid white;
}

<section>

			<div>

				<form action="send.php" method="post">
					<h2>Свяжитесь с нами</h2>
					<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваше имя" required><br>
					<input type="text" name="email" size="15" maxlength="20" value="" placeholder="Ваш e-mail" required><br>
					<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваш телефон" required><br>
					
					<input type="submit" name="Submit" value="Отправить"><br>

				</form>

			</div>

		</section>

1

Разобрался. Надо было добавить:

form input {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

1

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

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

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

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

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

Почта

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

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

Почта

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

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

html — тег не работает должным образом

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

спросил 4 года 8 месяцев назад

Изменено 4 года, 8 месяцев назад

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

Я работаю над веб-сайтом и использую тег center для центрирования некоторых h4.

прямо под моим заголовком Я центрирую этот текст h4 следующим образом:

  
 Lijst van jongeren die ouder zijn dan 18 jaar 
 
 

Но когда я обновляю страницу, она не совсем по центру, а немного правее.

Затем на той же странице в середине страницы я центрирую другой фрагмент текста, например:

Похоже, каждый h4 под моим заголовком неправильно центрируется, и я не знаю, почему это происходит.

Вот как это выглядит на моем сайте: https://gyazo.com/9d66a01487df4e19a7909afb4ab428c5

Это css моего html и тела:

 body{
    фон: #F5F5F5 !важно;
}
HTML, тело {
    высота: 100%;
    семейство шрифтов: "Arial";
    фон: #F5F5F5;
    поле: 0px;
    отступ: 0px;
}
 

Приветствуется любая помощь, спасибо

• html
• css

2

Возможно, вам стоит попробовать центрировать элементы с помощью CSS:

 h4{
выравнивание текста: по центру;
}
 

Проверить это

3

h4 — блочный элемент. На самом деле тег центрируется правильно.

Но вы можете выровнять текст внутри тега .

 .centered { text-align: center; } 

  
Здравствуйте!
  

Использование тега

 h4 { text-align: center; }