如何将图像放在容器中间，底部有两个按钮

Question

我是 html 和 css 的新手。我的问题是如何放置图像和两个按钮以确保它们一起显示？查看图像以了解我的意思。谢谢！！！

Height alignment

Answer 1

对于图像居中你可以使用：

<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> 标签的作用感到困惑，它只是一个换行符，以确保按钮不会放置在图像旁边。

Answer 2

这是我的解决方案。尝试全屏打开代码段，然后调整浏览器大小。

当屏幕宽度大于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>

如何将图像放在容器中间，底部有两个按钮

how to place image in the middle of the container and two buttons on bottom

html

css

image

button

vertical-alignment