как разместить изображение в середине контейнера и две кнопки внизу - PullRequest
Новая
       22

как разместить изображение в середине контейнера и две кнопки внизу

0 голосов
/ 27 мая 2018

Я новичок в HTML и CSS.У меня вопрос, как мне разместить изображение и две кнопки, чтобы быть уверенным, что они будут отображаться вместе?Посмотрите на изображение, чтобы понять, что я имею в виду.Спасибо !!!!

Высота выравнивания

Ответы [ 2 ]

0 голосов
/ 27 мая 2018

Это моё решение.Попробуйте открыть фрагмент в полноэкранном режиме, а затем измените размер браузера.

Если ширина экрана превышает 768px (вы можете изменить это значение), ширина container равна 500px.

А когда ширина меньше, то контейнер занимает всю ширину экрана.

Это обрабатывается 

.container {
  width: 500px;
  margin: 0 auto;
}

@media(max-width:768px) { 
  .container {
    width: 100%;
  }
}

Что касается кнопок, то их объединениеширина всегда будет равна ширине изображения.

Это обрабатывается 

.btn-container {
  font-size: 0;/*used for removing whitespace from inline elements*/
}

.btn-container button {
  width: 50%;
  font-size: initial;
  padding: 15px;
}


* {
  box-sizing: border-box;
}

.container {
  width: 500px;
  margin: 0 auto;
}

@media(max-width:768px) { /* can be any number less than this depending on ur choice */
  .container {
    width: 100%;
  }
}

img {
  display: block;
  width: 100%;
  height: 200px;
}

.btn-container {
  font-size: 0;
}

.btn-container button {
  width: 50%;
  font-size: initial;
  padding: 15px;
}


/*Space between */

.btn-holder {
  width: 50%;
  display: inline-block;
}

.btn-holder button {
  width: 100%;
}

.b1 {
  padding-right: 5px;
}

.b2 {
  padding-left: 5px;
}
<div class="container">
  <img src="http:placehold.it/250x250">
  <div class="btn-container">
    <button>button 1 </button>
    <button>button 1 </button>
  </div>
</div>
<br/>
<br/>
<br/>

<h3>If u want space between buttons</h3>
<div class="container">
  <img src="http:placehold.it/250x250">
  <div class="btn-container">
    <div class="btn-holder b1">
      <button>button 1 </button>
    </div>
    <div class="btn-holder b2">
      <button>button 1 </button>
    </div>
  </div>
</div>
0 голосов
/ 27 мая 2018

для центрирования изображения вы можете просто использовать: 

<div id="container">
  <img style="margin-left:auto;margin-right:auto;"></img>
</div>

Затем для кнопок вы можете использовать: 

<div id="wrapper">
    <button id="button1">button left</button>
    <button id="button2">button right</button>
</div>

, а затем этот css: 

#button1 {
    display: inline-block;
    width:120px;
    height:120px;
}
#button2 {
    display: inline-block;
    width:160px;
    height:160px;
}

Что вы потом объедините в это: 

    #button1 {
    display: inline-block;
    width:120px;
    height:120px;
}
#button2 {
    display: inline-block;
    width:160px;
    height:160px;
}
    <div id="container">
      <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F8%2F8f%2FExample_image.svg%2F1024px-Example_image.svg.png&f=1" style="margin-left:auto;margin-right:auto;"></img>
      <br>
      <button id="button1">button left</button>
      <button id="button2">button right</button>
    </div>

на случай, если вы не понимаете, что делает тег <br>, это просто разрыв строки, чтобы убедиться, что кнопки неразместиться рядом с изображением.

...