Question

这是Html页面，我无法使图片.loader居中并位于.please-wait的底部。如何使它居中和底部？

HTML文件

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

        </main>
        <aside id="aside-right">
            <img alt="Welcome" src="../images/panel.png" />
            <div class="please-wait">
                <h3>Please Wait</h3>

                    <img class="loader" src="../images/loading.gif" alt="Loading">

            </div>
        </aside>
    </div>

</body>

CSS文件

  #container
  {
    /* border: 2px solid black; */
    width: 100.6%;
    margin: 5px;
    white-space: nowrap;
    overflow: hidden;
    position:relative;
  }
  #main
  {
    Position:absolute;
    /* border: 2px solid blue; */
    float: left;
    margin:  3px;
    width: 65%;
    display: block;
    top: 25%;
  }
  #main.welcome
  {

    test-align: center;
  }
  #main.welcome h2
  {
    width: 58%;
    margin: 0 auto;
    text-align: center;
    word-break: normal;
    word-wrap: break-word;
    white-space: pre-line;
    /* border: 2px solid red; */
  }
  #aside-right
  {
    position:relative;
    max-height:200px;
    height:200px;
    border: 2px solid green;
    float: right;
    width: 27%;
  }
  #aside-right img
  {
    position:relative;
    width:100%;
    float:right;

  }
  .please-wait
  {
    position:absolute;
    border:2px solid red;
    height: 100%;
    width: 100%;
  }
  .please-wait h3
  {

    position: relative;
    /* border:2px solid blue; */
    margin: 15px;
    top:30px;
    text-align: center;
  }
  .please-wait img
  {
    position: relative;
    margin: 15px;
    text-align: center;
    max-width: 20%;
    border:2px solid blue;
  }

是否可以帮助我将其置于中心位置并将其置于.please-wait

的底部

JSFiddle

是否可以帮助我将其置于中心位置并将其置于.please-wait

的底部

Answer 1

CSS3 Flex可以操控图像和灵活布局....

html,
body {
  height: 100%;
  margin: 0;
}
.main {
  height: 100%;
  border: 1px dotted blue;
  position: relative;
  min-height: 500px;
}
.container {
  height: 100%;
  padding: 0 20px;
}

.image {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.image img {
  align-self: flex-end;
}

<div class="main">
  <div class="container">

    <div class="image">
      <img src="http://unsplash.it/300/220?random">
    </div>

  </div>
</div>

Answer 2

使用此fiddle

为面板图片添加了另一个类，这个......

.please-wait img {
    position: relative;
    margin: 15px;
    text-align: center;
    padding: 0 50px;
    margin-top: 110px;
    padding-bottom: 0;
    border: 2px solid blue;
}

如何使图像居中，并在HTML的底部

2 个答案: