代码之家  ›  专栏  ›  技术社区  ›  Matheno

图像位于div顶部的中间

  •  0
  • Matheno  · 技术社区  · 5 年前

    在我的应用程序中,我有一个居中的主分区。现在我想把我的徽标放在分区的中间。如图所示:

    enter image description here

    但是,当我的屏幕尺寸改变时,图片就被放错了位置。

    <div class="is-vertical-center">
      <div class="box">
          <div class="text-center">
            <img class="img-on-top" src="assets/logo.png">
          </div>
          <div class="router-outlet">
            <div class="pure-g">
              <div class="pure-u-1-1">
                  <h5>Start</h5>
              </div>
            </div>
            <div class="pure-g">
              <div class="pure-u-1-1">
                  <p>
                     Welcome Lorem ipsum
                  </p>
              </div>
            </div>
          </div>
      </div>
    </div>
    

    CSS:

    .is-vertical-center {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .box {
      background-color: $color-ts-main-flat;
      border: 1px solid $color-ts-main-border;
      border-radius: 4px;
      max-width: 30%;
      padding: 20px;
    }
    
    .text-center {
      text-align: center !important;
    }
    
    .img-on-top {
      top:0;
      margin-top:5%;
      position:absolute;
      right: 50%;
    }
    
    .router-outlet {
      flex: 1 0 100px;
      background-color:blue;
    
      /* stretch element immediately following the router-outlet element within the same parent element.
       * This is the element injected by angular (Assumption)
       */
      router-outlet + * {
        height: 100%;
        width: 100%;
      }
    }
    

    我做了一把小提琴,有人能指给我正确的方向吗?

    https://jsfiddle.net/x78a3oyj/

    提前谢谢。

    2 回复  |  直到 5 年前
        1
  •  1
  •   Gildas.Tambo    5 年前

    添加 transform3d 子元素

    .img-on-top {
        top: 0;
        transform: translate3d(-50%, -50%, 0);
        position: absolute;
        left: 50%;/*change to left*/
        width: 60px; /*set a width*/
        background: hsl(106, 100%, 34%);
    }
    

    然后在父元素上,设置 position relative

    .box {
      background-color: $color-ts-main-flat;
      border: 1px solid $color-ts-main-border;
      border-radius: 4px;
      max-width: 30%;
      padding: 20px;
      position: relative;/*add this*/
      background: hsl(0, 100%, 50%);
      margin-top: 3rem;
    }
    

    最后的密码是:

    .is-vertical-center {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .box {
      background-color: $color-ts-main-flat;
      border: 1px solid $color-ts-main-border;
      border-radius: 4px;
      max-width: 30%;
      padding: 20px;
      position: relative;
      background: hsl(0, 100%, 50%);
      margin-top: 3rem;
    }
    
    .text-center {
      text-align: center !important;
    }
    
    .img-on-top {
        top: 0;
        transform: translate3d(-50%, -50%, 0);
        position: absolute;
        left: 50%;
        width: 60px;
        height: 60px;
        background: hsl(106, 100%, 34%);
    }
    
    .router-outlet {
      flex: 1 0 100px;
      background-color:blue;
    
      /* stretch element immediately following the router-outlet element within the same parent element.
       * This is the element injected by angular (Assumption)
       */
      router-outlet + * {
        height: 100%;
        width: 100%;
      }
    }
    <div class="is-vertical-center">
      <div class="box">
          <div class="text-center">
            <img class="img-on-top" src="assets/logo.png">
          </div>
          <div class="router-outlet">
            <div class="pure-g">
              <div class="pure-u-1-1">
                  <h5>Start</h5>
              </div>
            </div>
            <div class="pure-g">
              <div class="pure-u-1-1">
                  <p>
                     Welcome Lorem ipsum
                  </p>
              </div>
            </div>
          </div>
      </div>
    </div>
        2
  •  1
  •   Piyush Teraiya    5 年前

    你可以使用这个代码顶部的图片

    body {
      margin: 0;
    }
    
    .is-vertical-center {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .box {
      background-color: $color-ts-main-flat;
      border: 1px solid $color-ts-main-border;
      border-radius: 4px;
      max-width: 30%;
      padding: 20px;
    }
    
    .text-center {
      text-align: center !important;
    }
    
    .img-on-top {
      top: 10px;
      margin-top: 0;
      position: absolute;
      right: 50%;
    }
    
    .router-outlet {
      flex: 1 0 100px;
      background-color: blue;
      /* stretch element immediately following the router-outlet element within the same parent element.
               * This is the element injected by angular (Assumption)
               */
    }
    
    .router-outlet+* {
      height: 100%;
      width: 100%;
    }
    <div class="is-vertical-center">
      <div class="box">
        <div class="text-center">
          <img class="img-on-top" src="assets/logo.png">
        </div>
        <div class="router-outlet">
          <div class="pure-g">
            <div class="pure-u-1-1">
              <h5>Start</h5>
            </div>
          </div>
          <div class="pure-g">
            <div class="pure-u-1-1">
              <p>
                Welcome Lorem ipsum
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>