I've been trying to build a website, and I've been having trouble. My nav bar is pretty funky sometimes and I can't align text like I want to. Beneath my nav bar, on the content of the page, I want a photo to be on the left side of the page and text centered in between the space leftover, both vertically and horizontally. I DO NOT want to have to use position:absolute to get the results I want. I tried using text-align and vertical-align, but that did nothing. Padding only works from the x-axis, but trying to align it vertically is a lost cause. Also, because the image is floating in order for the text to go beside, all the text (including the text that isn't supposed to be there) is aligning to one image instead of spreading out like I want it to. The image below is what I want it to look like, and the code I used to make it(I had to use position:absolute to get these results, which I DON'T want to do).
body {
color:black;
}
li.navi a{
text-decoration:none;
color:black;
padding:.3125em;
margin-right:1em;
}
ul.navi li:last-child a{
color:white;
background-color:#D03636;
border-radius:.3em;
}
ul.navi {
text-align:right;
border-radius:1em;
position:static;
padding-top:.5em;
font-family:'Roboto';
}
navigation {
margin:0em;
}
li.navi {
display:inline;
font-size:1.25em;
text-align:center;
}
b.Title{
font-weight:100;
text-align:left;
font-size:3.25em;
position:absolute;
top:0em;
left:0em;
color:black;
font-family:'Roboto';
}
ul.navi li:first-child{
margin-right:.25em;
}
article p{
text-indent:1.875em;
text-align:justify;
}
b.HomeTitle {
font-weight:75;
font-size:3em;
font-family:'Roboto';
position:absolute;
top:4em;
right:2em;
}
p.SubheadPhrase {
font-family:'Rubik';
font-size:1.25em;
position:absolute;
top:13em;
right:6em;
}
img.TitleImg {
height:25em;
width:35em;
float:left;
padding-right:2em;
padding-bottom:25em;
}
b.Title2 {
font-weight:75;
font-size:3em;
font-family:'Roboto';
position:absolute;
top:14em;
left:9%;
}
p.SubheadPhrase2 {
font-family:'Rubik';
font-size:1.25em;
position:absolute;
top:36em;
left:3%;
}
img.InfoIMG1 {
height:25.5625em;
width:35.9375em;
position:absolute;
top:35em;
right:0em;
}
b.Title3 {
font-weight:75;
font-size:3em;
font-family:'Roboto';
position:absolute;
top:23em;
right:4.4em;
}
p.SubheadPhrase3 {
font-family:'Rubik';
font-size:1.25em;
position:absolute;
top:58em;
right:7em;
}
img.InfoIMG2 {
height:25.5625em;
width:35.9375em;
position:absolute;
top:65em;
left:0em;
}
.MediaLookup {
background-color:#D03636;
margin:0 auto;
width:25em;
height:12em;
border-radius:1em;
}
.MediaSelect {
float:left;
width:5em;
height:2.25em;
text-align:center;
margin-left:1.25em;
margin-top:5.9em;
}
.MediaSearch {
float:left;
margin-top:5.9em;
margin-left:.5em;
height:1.8em;
}
.Search {
margin-left:5em;
margin-top:5.9em;
height:2.25em;
}<!DOCTYPE html><html><head><title>Home - churroScore</title><link href="churroScore CSS.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"></head><body><nav> <ul class = "navi"><li class = "navi"><a href = "https://www.youtube.com/" target = "_blank">Info</a></li><li class = "navi"><a href = "https://www.youtube.com/" target = "_blank">Games</a><li class = "navi"><a href = "https://www.youtube.com/" target = "_blank">Find a Score!</a></li></ul><b class = "Title">churroScore</b></nav><br/><br/><br/><br/><article><!-- This creates the first row of content that introduces and welcomes you to churroScore --><img class = "TitleImg" src = "Items/Amazon Games.png" alt = "List of Games"/><b class = "HomeTitle">Welcome to churroScore!</b><p class = "SubheadPhrase">There are lots of choices. churroScore makes it easy.</p><!-- This creates the second row of content which starts to tell you what churroScore does --><img class = "InfoIMG1" src = "Items/Mixed Reviews 2.png" alt = "Mixed Reviews"/><b class = "Title2">Get One Definitive Score.</b><p class = "SubheadPhrase2">Multiple reviews can confuse you. We compile scores to give you one.</p><!-- This creates the third row of content which concludes the explanation --><img class = "InfoIMG2" src = "Items/Comparison.png" alt ="Comparison"/><b class = "Title3">Pick a Game</b><p class = "SubheadPhrase3">churroScore lets you compare game ratings.</p></article></body></html>`