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

Posted 2023-03-05

【中文标题】如何将图像放在容器中间，底部有两个按钮

【英文标题】：how to place image in the middle of the container and two buttons on bottom

【发布时间】：2018-11-06 08:51:41

【问题描述】：

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

Height alignment

【问题讨论】：

请先自己试试。为了让我们更好地帮助您，请更新您的问题，以便在minimal, complete, and verifiable example 中显示您的相关代码。如果您可以让我们知道what you have tried so far 来解决您的问题，将会很有帮助。如需更多信息，请参阅有关how to ask good questions 和take the tour 的帮助文章。

【参考方案1】：

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

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

【参考方案2】：

对于图像居中，您可以使用：

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