Place an image at the top of a DIV and center it

前端 未结 6 1396
再見小時候
再見小時候 2021-01-24 08:53

I have 2 containers, one grey, one white. I\'d like to place an image (this will be a triangle down) to the very top of the white background and center it horizontally. How coul

相关标签:
6条回答
  • 2021-01-24 09:26

    margin:auto only works on block elements.

    .triangle {
      margin: auto;
      margin-top: -80px;
      display: block;
    }
    

    (Your declarations for margin-left and -right are superfluous, since you are overwriting them with margin: auto on the next line anyway.)

    0 讨论(0)
  • 2021-01-24 09:33

    Update your .triangle class to this. You need to make it display as block. And add bottom margin to add space between title and the image.

    .triangle {
        margin: auto;
        margin-top: -76px;
        display: block;
        margin-bottom: 30px;
    }
    
    0 讨论(0)
  • 2021-01-24 09:42

    Please try this code..

    .triangle {
        display: block;
        margin: -80px auto 0;
    }
    
    0 讨论(0)
  • 2021-01-24 09:43

    try this

    #id{
        text-align: center;
        vertical-align: text-top;
    }
    

    or

    #id {
        text-align: center;
       margin-top:0px;
    }
    

    change value of margin-top according to your requirement

    0 讨论(0)
  • 2021-01-24 09:43

        .container{
    position:relative;
    }
    .triangle {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -130px;
    }

    0 讨论(0)
  • Add position: relative into .padding-onlytop-lg. Example

    .padding-onlytop-lg {
        padding-top: 75px !important;
        position: relative;
    }
    

    And Write in the flowing way

    .triangle {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 0;
    }
    
    0 讨论(0)
提交回复
热议问题