выравнивание текста: центр плохо справляется с шириной и отображением: встроенный блок

Question

Я пытаюсь центрировать текст по ширине костюма.Установка ширины или максимальной ширины восстановит положение линии слева.Я делаю это так:

HTML-файл

CSS-файл

Результат

Мне нужно иметь собственную ширину для каждого из них, иметь <h6> и <a> в одной строке и все содержимое (включая границу) в середине.

Answer 1

Вы можете достичь этого, независимо от того, находится ли он в div или нет с помощью CSS ниже.Похож на некоторые другие, но также включает поле: auto;который будет центрировать h1, даже если он отображается как inline или inline-block.

body{
  text-align: center;
}
h1{
  text-align: center !important;
  font-family: sans-serif;
  width: 200px;
  margin: auto;
  display: inline-block;
}

Answer 2

/*without display: inline-block;*/
.h1{
  text-align: center !important;
  font-family: sans-serif;
  width: 200px;
  margin: auto;
}

/*with display: inline-block;*/
.with_div{
  text-align: center;
}
.with_div h1{
  text-align: center !important;
  font-family: sans-serif;
  width: 200px;
  display: inline-block;
}

<!--  without display: inline-block; -->
<h1 class="h1">hello</h1>


<!-- with display: inline-block -->
<div class="with_div">
  <h1>hello</h1>
</div>

Answer 3

Без какой-либо оболочки div.CSS flex

h1{
  display:flex;
  justify-content:center;
}

Answer 4

Вам необходимо установить родительский из h1 в text-align:center

body {
  text-align: center;
}

h1 {
  background: lightgreen;
  font-family: sans-serif;
  width: 200px;
  display: inline-block;
}

<h1>Some text</h1>