Как выровнять изображение в нижнем центре div

Question

Я хочу выровнять изображение до основания внизу из div, а также хочу, чтобы центр он горизонтально.

Это то, что я хотел выполнить (снимок ниже), но в моем проекте есть огромный пробел ниже коровы. Изображение коровы нарезано пополам, поэтому я хочу, чтобы нижняя часть придерживалась нижней части порта представления, будучи отзывчивой.

HTML:

<div class="main"> 
    <div class="container"> 

     <div class="nav"> 
      <ul> 
       <li><a href="index.html" >Work</a></li> 
       <li><a href="about.html">About</a></li> 
       <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 

     <div class="main_text"> 
      <h1>Awh Cow! I got no <span class="yellow">Dribbble</span>.</h1> 
      <p>Invite me to Dribbble maybe? Thanks.</p> 
     </div> 

     <a href="mailto:hi@gauthamsk.com" class="button">Visit Profile</a> 

     <div class="cow"></div> 

    </div> <!-- end container --> 
</div> <!-- end main --> 

CSS:

.cow { 
    height: 280px; /* Change this height to change the size of the cow */ 
    background: url(../images/cow.png) bottom center no-repeat; 
    background-size: contain; 
} 

Answer 1

Для того, чтобы .main иметь высоту 100%, вы должны убедиться, что существует значение высоты вычисляется для содержащего блока.

Один из способов сделать это - назначить height: 100% как html, так и body тегам.

Простой способ разместить элемент блока .cow в нижней части .main - использовать абсолютное позиционирование. Сначала установите position: relative на .main, чтобы установить точку отсчета для позиционирования .cow.

Применить position: absolute к .cow и установите смещение дна bottom: 0 и это будет выравнивать нижний край .cow к у .main. Абсолютное позиционирование даст ширину усадки по ширине по умолчанию, поэтому установите left: 0 и right: 0, чтобы дать .cow полную ширину .main. Это также учитывает любую дополнительную ширину из-за любых дополнений или полей, добавленных к .container.

Возможно, вы захотите присвоить минимальную высоту для .main, чтобы обеспечить достаточное пространство для текста, кнопки и изображения. Если вы сжимаете страницу достаточно, элемент с абсолютным расположением может перекрывать ваш текст.

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.main { 
 
    height: 100%; 
 
    border: 1px dotted blue; 
 
    position: relative; 
 
    min-height: 500px; 
 
} 
 
.container { 
 
    height: 100%; 
 
    padding: 0 20px; 
 
} 
 
.main_text { 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.main_text h1 { 
 
    padding-top: 10%; 
 
    margin-top: 0px; 
 
    font-weight: 400; 
 
    font-size: 45px; 
 
    margin-bottom: 0px; 
 
} 
 
.main_text p { 
 
    width: 70%; 
 
    font-size: 18px; 
 
    font-weight: 400; 
 
    line-height: 24px; 
 
    margin-top: 25px; 
 
    margin-bottom: 50px; 
 
} 
 
.buttons { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.button { 
 
    text-align: center; 
 
    margin: 0px 30px; 
 
    color: #000; 
 
    text-decoration: none; 
 
    border: 3px solid #000; 
 
    border-radius: 50px; 
 
    padding: 10px 80px; 
 
    transition: 0.3s background; 
 
    font-size: 15px; 
 
} 
 
.button:hover { 
 
    color: #fff; 
 
    background: #000; 
 
    transition: 0.3s background; 
 
} 
 
.cow { 
 
    display: flex; 
 
    justify-content: center; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.cow img { 
 
    align-self: flex-end; 
 
}

<div class="main"> 
 
    <div class="container"> 
 

 
    <div class="main_text"> 
 
     <h1>Awh Cow! I got no <span class="yellow">Dribbble</span>.</h1> 
 
     <p>Invite me to Dribbble maybe? Thanks.</p> 
 
    </div> 
 

 
    <div class="buttons"> 
 
     <a href="mailto:hi@gauthamsk.com" class="button">Visit Profile</a> 
 
    </div> 
 

 
    <div class="cow"> 
 
     <img src="http://placehold.it/300x150"> 
 
    </div> 
 

 
    </div> 
 
</div>

Примечание: Поддержка браузера для flex еще глючит в некоторых браузерах и не имеет обратной совместимости см http://caniuse.com/#feat=flexbox. Если все, что вам нужно, - это горизонтальное центрирование, если достаточно встроенных или встроенных блоков, text-align: center.

Answer 2

Использование flexbox)

.cow { 
 
    height: 400px; 
 
    background: blue; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
img { 
 
    align-self: flex-end; 
 
}

<div class="cow"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

Answer 3

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

.centerBottom{ 
    position:fixed; 
    bottom:0px; 
    left:50%; 
} 

http://plnkr.co/edit/HAtpO8aR3njgN73hCAA4?p=preview

Answer 4

Попробуйте это решение: https://jsfiddle.net/adwc4gwt/

.cow{ 
    position:fixed; 
    bottom:0px; 
    background-color:red; 
    width:100%; 
} 
img{ 
text-align:center; 
display:block; 
} 

Answer 5

мы можем использовать CSS3 преобразования свойство, как мы можем использовать отрицательный процент свойство выравнивания изображения на дне.

.centerBottom{ 
 
    position:fixed; 
 
    bottom:0px; 
 
    left:50%; 
 
    -ms-transform:translate(-50%,0%); 
 
    -moz-transform:translate(-50%,0%); 
 
    -o-transform:translate(-50%,0%); 
 
    -webkit-transform:translate(-50%,0%); 
 
    transform:translate(-50%,0%); 
 
}

<div></div> 
 
    <div></div> 
 
    <div class="cow"> 
 
    <img src="http://placehold.it/350x150" class="centerBottom"> 
 
    </div>