Überschrift und Bild nicht in Kopf Ausrichten

Hier ist mein CodeÜberschrift und Bild nicht in Kopf Ausrichten

header img{ 
 
\t width:10%; 
 
\t vertical-align: middle; 
 
} 
 
header h1{ \t 
 
\t text-align: right; 
 
\t display:inline; 
 
\t position: absolute; 
 
} 
 
header { 
 
\t width : 100%; 
 
\t height: 1% ; 
 
\t background: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href = "css\main.css" > 
 
    <link rel="stylesheet" href="css\responsive.css"> 
 
</head> 
 
<body> 
 
    <header> 
 
    <div class = "container-fluid"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/12/15/09/31/badge-1093966_640.png" alt=""> 
 
    <h1>KUNAL MEHTA</h1> 
 
    </div> 
 
    </header> 
 
    <section> 
 
    
 
    </section> 
 
    <footer> 
 
    
 
    </footer> 
 

 
    <script src = "js/main.js"></script> 
 

 
</body> 
 
</html>

Was ich rede ist, dass ich die h1 nach rechts zu gehen und sie beide in der Mitte ausrichten sollen das übergeordnete Element.Ich verwende BOOTSTRAP, so dass Antworten mit Bootstraps empfohlen werden

Quelle

2016-10-14 Kunal_Boss

Zentrum lesen, vertikal oder beides? – j08691

Sowohl horizontal als auch vertikal –

Nun, Sie können immer Flex für das verwenden- Und ich empfehle wirklich, es zu verwenden, da es die Lösung viel sauberer und einfacher zu pflegen macht. Bitte beachten Sie, dass ich nur das Containerelement ändern musste, um diese Lösung zu erstellen, und säubere den H1-Rand.

.container-fluid { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 100px 
} 

.container-fluid h1 { 
    margin: 0 
} 

header { 
    background: red; 
} 

header img{ 
    width:10%; 
}

Sie können horizontal weitere Informationen here

Quelle

2016-10-14 15:18:44 Chen

Überschrift und Bild nicht in Kopf Ausrichten

Antwort

Verwandte Themen