Vertical align an image and a multiline text

前端 未结 4 991
天命终不由人
天命终不由人 2020-12-09 02:26

I´m trying to align an image and a text vertically:

+-------------------------+ -- Viewport
|         Text text text  | 
| +-----+ text text text  | 
| |IMAGE| te         


        
4条回答
  •  不思量自难忘°
    2020-12-09 02:45

    Do you mean something like this demo fiddle?

    HTML:

    
    

    CSS:

    #viewport {
        background: #bbb;
        width: 350px;
        padding: 5px;
        position: relative;
    }
    #viewport img {
        position: absolute;
        top: 50%;
        margin-top: -30px;  /* = image height div 2 */
    }
    #viewport span {
        margin-left: 68px;  /* = image width + 8 */
        display: block;    
    }
    

提交回复
热议问题