Vertikaler div float auf der linken Seite Mitte einer Seite

Wie kann ich einen div float linken Seite einer ganzen Seite und immer in einer vertikalen Mitte der linken Seite machen?Vertikaler div float auf der linken Seite Mitte einer Seite

Mein HTML-Code ist einfach:

<body> 
    <div class="num_book"> 
    <img src="imgs\PhoneDir.png" alt="phone dir" height="142.2" width="45.6"> 
    </div> 
</body>

Meine CSS ist so weit:

.num_book { 
    float: left; 
}

ich in meinem CSS versucht haben: Position, margin, padding, Display, vertical-align mit kein Glück, keine Idee?

Quelle

2017-09-02 Dreamer64

Ich würde es auf diese Weise tun, indem flexbox:

.wrapper { 
 
    /* vertical bar on left side */ 
 
    height: 100%; 
 
    left: 0; 
 
    position: fixed; 
 
    top: 0; \t 
 

 
    /* align items inside vertically centered */ 
 
    align-items: center; 
 
    display: flex; 
 
} 
 
.centered { 
 
    background-color: red; 
 
}

<div class="wrapper"> 
 
    <div class="centered">Hello!</div> 
 
</div>

Die .wrapper ist ein festes (see position) vertikale Linie auf der linken Seite und .centered Die Innenseite ist vertikal zur Mitte ausgerichtet (siehe display: flex und align-items).

Quelle

2017-09-02 12:24:30 juzraai

body{ 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 

 
.box{ 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    top: 0px; 
 
    left: 0px; 
 
    margin: auto; 
 
}

<body> 
 
    <div class="box"></div> 
 

 
<body>

Quelle

2017-09-02 12:20:45 zynkn

Es ist 2017, use a flexbox.

.container { 
    display: -ms-flexbox; 
    display: flex; 

    -ms-flex-align: center; 
    align-items: center; 
}

MDN has a good example of this too.

Quelle

2017-09-02 12:25:27 lpd

Ein Weg ist oben auf 50% einzustellen, absolute Position.

<style> 
    .num_book { 
     float: left; 
     top:50%; 
     position:absolute; 
    } 
    </style> 
    <body> 
     <div class="num_book"> 
     <img src="imgs\PhoneDir.png" alt="phone dir" height="64" width="64"> 
     </div> 
    </body>

Quelle

2017-09-02 12:25:28

Vertikaler div float auf der linken Seite Mitte einer Seite

Antwort

Verwandte Themen