Блог

Главная - Вопросы по программированию - Как мне разместить изображение точно по центру над текстом внутри поля?

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

#html #css

#HTML #css

Вопрос:

Я не могу заставить это работать: (Я просто пытаюсь переместить изображение немного за пределы поля (наполовину внутри, наполовину снаружи) над именем, но в center . Что я здесь делаю не так?

 body {
  margin-top: 100px;
}
.box_info {
  display: inline-block;
  padding: 20px;
  min-width: 300px;
  background-color: #DDD;
  border-radius: 4px;
  text-align: center;
}
.box_info_name {
  display: block;
  font-size: 24px;
}
.box_info_logo {
  max-width: 100%;
  height: auto;
  position: absolute;
  text-align: center;
}
.box_info_name_inside {}  
 <div class="box_info">
  <div class="box_info_name">
    <img src="http://placehold.it/150x150" class="box_info_logo">
    <div class="box_info_name_inside">Name</div>
  </div>
</div>

Вот скрипка: https://jsfiddle.net/ffxyc6d0/1 /

Комментарии:

1. Можете ли вы нарисовать пример того, что вам нужно? (например, только два прямоугольника с текстом, чтобы мы могли видеть их взаимное расположение) Из этого описания очень трудно понять, чего именно вы хотите. (Наполовину с правой стороны, но по центру по вертикали? Горизонтально по центру, но над текстом? Половина пополам в верхнем центре?)

2. В основном то, что показал @RasmusGlenvig, за исключением того, что изображение немного перемещается за пределы поля … прямо вверх.

Ответ №1:

попробуйте это :

 body{
  margin-top:100px;
}
.box_info{
    display: inline-block;
    padding: 20px;
    min-width: 300px;
    background-color: #DDD;
    border-radius: 4px;
    text-align:center;
 }
.box_info_name{
  display: block;
  font-size: 24px;
}
.box_info_logo{
    width: 150px;
    height: 150px;
    position: relative;
    bottom: 50px;
    text-align:center;
}
.box_info_name_inside{

}  
 <body>
 <div class="box_info">
<div class="box_info_name">
<img src="http://placehold.it/150x150" class="box_info_logo">
<div class="box_info_name_inside">Name</div>
</div>
</div>
</body>

Ответ №2:

Если изображение имеет фиксированный размер (не будет изменяться динамически), вы можете разместить его с отрицательным запасом в половину высоты изображения, например margin-top: -85px; (уменьшите дополнительные 10 пикселей, а также половину высоты изображения, поскольку в родительском контейнере есть 20 пикселей отступа)

Пример ниже:

 body {
  margin-top: 100px;
}
.box_info {
  display: inline-block;
  padding: 20px;
  min-width: 300px;
  background-color: #DDD;
  border-radius: 4px;
  text-align: center;
}
.box_info_name {
  display: block;
  font-size: 24px;
}
.box_info_logo {
  display: inline-block;
  margin-top: -85px;
  max-width: 100%;
  height: auto;
  text-align: center;
}  
 <div class="box_info">
  <div class="box_info_name">
    <img src="http://placehold.it/150x150" class="box_info_logo">
    <div class="box_info_name_inside">Name</div>
  </div>
</div>

Ответ №3:

Вы также можете сделать это с помощью flexbox 🙂

 body{
  margin-top:100px;
}
.box_info{
  background: #ccc;
 }
.box_info_name{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 24px;
}
.box_info_logo{
  position: relative;
  margin-top: -75px;  
}  
 <div class="box_info">

<div class="box_info_name">

<img src="http://placehold.it/150x150/fff" class="box_info_logo">

<div class="box_info_name_inside">Name</div>

</div>

</div>

Ответ №4:

Мне нравится давать «нестандартные» ответы на подобные вопросы, без использования javascript необходимость изменять все поля становится немного раздражающей. Итак, я решил это по-другому. Вместо того, чтобы перемещать все по странице, почему бы просто не сделать часть фона прозрачной.

 .box_info {
  display: inline-block;
  padding: 20px;
  min-width: 300px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px);
  border-radius: 4px;
  text-align: center;
}
.box_info_name {
  display: block;
  font-size: 24px;
}
.box_info_logo {
  text-align: center;
}
.box_info_name_inside {}  
 <div class="box_info">
  <div class="box_info_name">
    <img src="http://placehold.it/150" class="box_info_logo">
    <div class="box_info_name_inside">Name</div>
  </div>
</div>

<div class="box_info">
  <div class="box_info_name">
    <img width="150px" src="https://lh4.googleusercontent.com/-1rv6qW3mpvA/AAAAAAAAAAI/AAAAAAAAS3M/xq0SSZzrgVg/photo.jpg" class="box_info_logo">
    <div class="box_info_name_inside">Andrew Bone</div>
  </div>
</div>

Раньше я background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 95px, #DDD 95px); говорил, что все, что должно быть после 95px , должно быть #DDD и до, должно быть прозрачным.

95 пикселей — это высота изображения (150 пикселей), деленная на 2 (75 пикселей) плюс заполнение внешнего поля (20 пикселей).

Это здорово, если размер изображения остается неизменным, если вы планируете его изменить, тогда нам, возможно, придется подумать о добавлении небольшого javascript.

линейный градиент не поддерживается в IE6, но есть в современном IE, а также Edge, Chrome и firefox.

Надеюсь, вы найдете это полезным.

Ответ №5:

Я не уверен, правильно ли я понимаю ваш вопрос, но, возможно, это то, чего вы не хотите.

Я просто удалил position: absolute из вашего .box_info_logo класса.

Вот так:

 body{
  margin-top:100px;
}
.box_info{
    display: inline-block;
    padding: 20px;
    min-width: 300px;
    background-color: #DDD;
    border-radius: 4px;
    text-align:center;
 }
.box_info_name{
  display: block;
  font-size: 24px;
}
.box_info_logo{
    max-width: 100%;
    height: auto;
    text-align:center;
}
.box_info_name_inside{
  
}  
 <div class="box_info">
  <div class="box_info_name">
    <img src="http://placehold.it/150x150" class="box_info_logo">
    <div class="box_info_name_inside">Name</div>
  </div>
</div>

Комментарии:

1. Это то, что я хочу .. за исключением того, что я хочу, чтобы изображение плавало за пределами поля до самого верха… на полпути 🙂

Ответ №6:

Чтобы сохранить .box_info тот же размер, что и в вашем примере jsfiddle, вы можете добавить position: relative к этому классу, сохраняя .box_info_logo as position: absolute . 

 body {
  margin-top: 150px;
}
.box_info {
  display: inline-block;
  padding: 20px;
  min-width: 300px;
  background-color: #DDD;
  border-radius: 4px;
  text-align: center;
  position: relative;
}
.box_info_name {
  display: block;
  font-size: 24px;
}
.box_info_logo {
  max-width: 100%;
  height: auto;
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 50px;
}
.box_info_name_inside {}  
 <div class="box_info">

  <div class="box_info_name">

    <img src="http://placehold.it/150x150" class="box_info_logo">

    <div class="box_info_name_inside">Name</div>

  </div>

</div>