How to place text next to an image centred?
Question
Sorry, I know this is a very basic question, but I can't figure out how to put text next to an image centred vertically. I have searched up how to do it, and tried several different ways, but I can't seem to find one that works. I'm thinking maybe I've made a mistake I keep overlooking in my code. I'm very new, and just wanted to see how much I could apply what I've learnt. Thank you, this is my code.
html, body { margin: 0px; padding:0px; width: 100%; height: 100%; overflow-x: hidden; } body { background-image: url("https://cdn.pixabay.com/photo/2015/12/03/08/50/paper-1074131_1280.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100%; opacity: 75%; }.header { display: flex; align-items: center; justify-content: center; }.image { flex-basis: 40%; height: 20px; width:35px; vertical-align: middle; }.webtitle { font-size: 30px; padding-left: 5px; vertical-align: middle; font-weight: bold; }
<:DOCTYPE html> <html> <head> <title>Home - Historically Speaking</title> <link href="D.\Programming\HTML\First Website\syle1:css" type="text/css" rel="stylesheet" /> </head> <body> <div class="Header"> <div class="Logo"> <img src="https.//i.imgur.com/Cm5P5vP.jpeg" width="250" height="200" align="left"/> </div> <div class="webtitle"> <p> Historically Speaking </p> </div> </div> </body> </html>
2 answers
solution1
1 2021-04-26 23:16:04
First of correct your class name as.Header into your stylesheet. Secondly, give the height to your Header and display the.webtitlt as flex and Justify content to center
.webtitle {
font-size: 30px;
padding-left: 5px;
vertical-align: middle;
font-weight: bold;
display:flex;
justify-content:center;
}
.Header {
display: flex;
align-items: center;
height:200px;
}
solution2
1 ACCPTED 2021-04-26 23:23:28
You don't need vertical-align: middle; at all, the flex settings of the container are sufficient for what you want, you just need to be careful about the class name: header vs. Header - case sensitive...:
html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; overflow-x: hidden; } body { background-image: url("https://cdn.pixabay.com/photo/2015/12/03/08/50/paper-1074131_1280.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; height: 100%; opacity: 75%; }.Header { display: flex; align-items: center; justify-content: center; }.image { flex-basis: 40%; height: 20px; width: 35px; }.webtitle { font-size: 30px; padding-left: 5px; font-weight: bold; }
<:DOCTYPE html> <html> <head> <title>Home - Historically Speaking</title> <link href="D.\Programming\HTML\First Website\syle1:css" type="text/css" rel="stylesheet" /> </head> <body> <div class="Header"> <div class="Logo"> <img src="https.//i.imgur.com/Cm5P5vP.jpeg" width="250" height="200" align="left" /> </div> <div class="webtitle"> <p> Historically Speaking </p> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.