Как я могу ориентировать горизонтально div внутри другого div?

Я нуждаюсь в том, чтобы сориентировать горизонтально div я помещаю внутри приходящего ученика принимая как базового этот код HTML и CSS:

.interno {
    background-color: green;
    height: 20px;
    width: 50%;
}

.externo {
    background-color: red;
    width: 200px;
    padding: 20px;
}

JSFiddle: https://jsfiddle.net / fpvkcrkg /

37
задан 01.12.2015, 11:09
11 ответов

Используй боковые автоматические края.

.externo {
  border: 1px solid blue;
}
.interno {
  border: 1px dashed goldenrod;
  margin: auto;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Действительно только ты должен помещать их в Вашу стоимость margin-left и margin-right, но в твоем случае, не потребовав верхнего и(или) нижнего края, он стоил бы тебе, таким образом, так как согласно документации, если бы espefica, таким образом, он был равно как делать:

.interno {
  margin: 0 auto;
}

А именно, начальник и нижний равен нулю.

32
ответ дан 08.11.2019, 21:06
  • 1
    Помня однако, что посредством м и # 225; rgenes autom и # 225; костариканские в правую сторону и левую сторону необходимо определять ширину элемента посредством свойства width. –  Felipe Calvo 01.12.2015, 14:29
  • 2
    То, что является очевидностью, потому что, в случае когда не показывает ширину, стоимость равна auto, что в элементе блока, как это случай OP (и #191; ПО? и #191; AO?), покрывать и # 237; во всю доступную ширину и уже не habr и # 237; которого ничто не ориентировать. –  pzin 02.12.2015, 05:54

Существуют большие способы ориентировать элементы с CSS, однако одна из тех, которые взяли большую силу в последний год, использование Flexbox.

Используя Flexbox контейнер не нуждается в том, чтобы иметь никакого специфического свойства, чтобы быть помещенным в месте, однако используя свойства Flexbox для детей возможно делать немыслимые вещи с традиционным CSS.

.externo {
  border: 1px solid blue;
  align-items: center;
  display: flex;
  justify-content: center;
}
.interno {
  border: 1px dashed goldenrod;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Чтобы знать больше относительно Flexbox я рекомендую тебе посещать следующие ссылки:


Если ты ищешь решение, которое не включал бы Flexbox тогда, я рекомендую тебе посещать Centering in CSS: В Комплете Гиде. Это абсолютный путеводитель как ориентировать элементы, используя CSS, не импортируя браузера, который ты нуждаешься в том, чтобы вынести.

17
ответ дан 08.11.2019, 21:06
  • 1
    я думаю, что он поместил бы display: flex перед align-статьями. (В самом деле, он поместил бы display перед почти любой вещью) –  Fabián Heredia Montiel 01.12.2015, 11:19
  • 2
    Связанные ресурсы должны бы быть в espa и # 241; ol, нет? –  Fabián Heredia Montiel 01.12.2015, 11:19
  • 3
    Останься, не будучи такой хорошей и подробно описанной как три, которые я соединяю... Я настаиваю, из-за qu и # 233; ограничиваться? StackOverflow в Espa и # 241; ol не должен быть извинениями, чтобы избегать изучать язык, который будет помогать нам непомерно в толкании наших бегов как разработчики. Мы ничего не зарабатываем с exclusi и # 243; n. –  Dave Gomez 01.12.2015, 11:24
  • 4
    Я соглашаюсь... ограничиваться в v и # 237; nculos в Espa и # 241; ol быть и # 237; в крайне ограниченный (и достаточно грустный) –  Jcl 01.12.2015, 11:27
  • 5
    @Fabi и # 225; nHerediaMontiel не обязательно, добавочные ресурсы не часть ответа, это шрифт informaci и # 243; n добавочный для того, который хочет / может прочитать их. То, что, если это важно, состоит в том, что, если соединение содержит ответ, этот текст должен включаться ac и # 225; в ответе и объясненный в espa и # 241; ol –  Carlos Muñoz 01.12.2015, 11:35

Добавляет один margin:0 auto; к классу interno в CSS это, чтобы ему удается сориентировать горизонтально внутри внешнего div

.interno {
  background-color: green;
  height: 20px;
  width: 50%;
  margin: 0 auto;/*esto fue lo que se agregó*/
}
.externo {
  background-color: red;
  width: 200px;
  padding: 20px;
  text-align:center;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>
12
ответ дан 08.11.2019, 21:06

Ты можешь применять этот CSS в div ученик закрытого учебного заведения:

.interno {
  width: 50%;
  margin: 0 auto;
  border: 1px dashed goldenrod;
}
.externo {
  border: 1px solid blue;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Конечно, ты не должен устанавливать ширину в 50 %. Любая нижняя ширина в div отец будет функционировать. margin: 0 auto вот то, что он делает сориентированный на себя.

Если ты хочешь включить IE8 +, возможно, что лучше, использовать это в Вашем месте:

.interno {
  display: table;
  margin: 0 auto;
  border: 1px dashed goldenrod;
}
.externo {
  border: 1px solid blue;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Он будет способствовать тому, чтобы внутренний элемент освоился горизонтально, и функционируй, не определяя конкретной ширины.

Шрифт

JSFiddle

6
ответ дан 08.11.2019, 21:06

Ты можешь использовать flexbox в div приходящий ученик.

.externo {
  display: flex;
  justify-content: center;
  border: 1px solid blue;
}
.interno {
  border: 1px dashed goldenrod;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>
5
ответ дан 08.11.2019, 21:06

Другая форма состоит в том, чтобы использовать transform: translateX

Устанавливать во внешнем div одну posiciГіn relative, absolute или fixed и должно иметь определенные размеры.

Во внутреннем div position: absolute и left: 50%, потом применять transform: translateX(-50%).

.externo {
  position: relative;
  width: 200px;
  height: 100px;
  background: gray;
}

.interno {
  position: absolute;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translateX(-50%);
  background: red;
}
<div class="externo">
  <div class="interno">
    
  </div>
</div>

, Протестированные в:

  • Производит 24.0 (с v12.1)
  • Safari 5.1.7 (с v4 с префиксом-webkit-)
  • Firefox 31.0 (с v3.6 с префиксом-moz, - с v16 без префикса)
  • Chrome 46 (с v11 с префиксом-webkit, - с v36 без префикса)
  • IE 9, 11, 10 (с v9 с префиксом - м, - с v10 без префикса)
  • Edge всех более плывущих Совместимых
  • в: Хан I Использовал?

Замечает: Коктейль с translateY производит сориентированный на обе оси. Нужно добавлять внутренний div top: 50%.

.externo {
  position: relative;
  width: 200px;
  height: 100px;
  background: gray;
}

.interno {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  background: red;
}
<div class="externo">
  <div class="interno">
    
  </div>
</div>
4
ответ дан 08.11.2019, 21:06

.interno {
  background-color: green;
  height: 20px;
  width: 50%;
  margin: 0 auto;
}
.externo {
  border: 1px solid blue;
}
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>

Просто aГ±adiendo Гєltima lГ-nea, осваивается относительно Вашего отца.

3
ответ дан 08.11.2019, 21:06

Ло Мас RГЎpido Es Включать Этикетку внутри этой Части cГіdigo, без CSS И Flex-Bos Ni На Де На... Это Делается asГ - простого:

<center>
  <div class="externo">
      <div class="interno">
      </div>
  </div>
</center>
.interno {
    background-color: green;
    height: 20px;
    width: 50%;
}

.externo {
    background-color: red;
    width: 200px;
    padding: 20px;
}
0
ответ дан 08.11.2019, 21:06

Ло Мас RГЎpido Es Включать Этикетку внутри этой Части cГіdigo, без CSS И Flex-Bos Ni На Де На... Это Делается asГ - простого:

HTML CODE:

<center>
  <div class="externo">
      <div class="interno">
      </div>
  </div>
</center>

CSS CODE:
.interno {
    background-color: green;
    height: 20px;
    width: 50%;
}

.externo {
    background-color: red;
    width: 200px;
    padding: 20px;
}
0
ответ дан 08.11.2019, 21:06

Просто aГ±ade display: inline-block в <div> внутреннее помещение и ты это ориентируешь aГ±adiendo text-align: center в <div> внешняя сторона.

QuedarГ - В asГ-:

  .interno {
    height: 20px;
    width: 50%;
    background-color: green;
    display: inline-block;
  }
  .externo {
    background-color: red;
    width: 200px;
    padding: 20px;
    text-align: center;
  }
<div class="externo">
  <div class="interno">
    Hola
  </div>
</div>
-1
ответ дан 08.11.2019, 21:06

Самая простая форма - с этикеткой html "center", также ты это можешь делать с flexbox, position absolute, автоматический край, и т.д.

Какие-то примеры:

.interno {
  width: 20%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #fff;
}

.externo {
  width: 50%;
  height: 50px;
  position: relative;
  background-color: #ccc;
}

#ejemplo1 .interno {
  background-color: blue;
}

#ejemplo2 .interno {
  position: absolute;
  left: calc(50% - 10%);
  background-color: green;
}

#ejemplo3 .interno {
  margin: 0 auto;
  background-color: red;
}

#ejemplo4.externo {
  display: flex;
  justify-content: center;
}

#ejemplo4 .interno {
  background-color: salmon;
}
<div class="externo" id="ejemplo1">
  <!--etiqueta center (no recomendable)-->
  <center>
    <div class="interno">
      hola mundo
    </div>
  </center>
</div>

<hr>

<div class="externo" id="ejemplo2">
  <!--posición abosluta calculada-->
  <div class="interno">
    hola mundo
  </div>
</div>

<hr>

<div class="externo" id="ejemplo3">
  <!--margen automático (recomendable)-->
  <div class="interno">
    hola mundo
  </div>
</div>

<hr>

<div class="externo" id="ejemplo4">
  <!--flexbox (recomendable)-->
  <div class="interno">
    hola mundo
  </div>
</div>
-3
ответ дан 08.11.2019, 21:06
  • 1
    Привет @Pablo Пожалуйста оставь в post примеры c и # 243; я говорю. Твой ответ должен быть и #250; til даже, если v и # 237; nculo сегодня d и # 237; в он ломается. –  JuanK 14.12.2015, 12:44
  • 2
    Не является рекомендуемым использование элемента <center>, это устаревший элемент ( deprecated ) и терять и # 225; опора в будущем. developer.mozilla.org/en-US/docs/Web/HTML/Element/center –  Diego Torres 14.12.2015, 13:22