Center html content with css
Question
I'm building an WIP placeholder page for myself and I'm stuck with centering the media content with CSS. I managed to get it to work on mobile but the content is slightly to the right on desktop.
UPDATE: I've added the entire code along with the CSS I selected to support it. As you can tell, the .display section of the CSS is where I'm having the most trouble (assuming I've troubleshot this right). From what I've been told here & read elsewhere, the tags I initially tried in HTML don't apply to HTML5 so I'm hoping to get CSS to finish it off. Like I mentioned before, when previewing on mobile, it works fine and the links at the bottom of the page stack nicely but it all falls apart in full desktop.
Here's the code below:
@charset "utf-8"; /* CSS Document */ .content { max-width: 500px; margin: auto; } .display{ position:relative; display: block; padding: 0; margin:0 auto; width: auto; text-align:center; display:flex; justify-content:center; } .button { background-color: #FFFFFF; border: #000000; border-bottom-width: 2px; text-decoration-color: #FFFFFF; padding: 15px 32px; text-align: center; display: inline-block; font-size: 16px; } .help-block.with-errors { color: #ff0000; margin-top: 5px; } .overlay { position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.8); z-index:100; color:white; display: none; font-family: 'source_sans_proregular'; line-height: 25px; -webkit-text-size-adjust:none; text-size-adjust:none; } .container { width:100%; height:100%; margin:0; padding:0; border:0; } .container td { vertical-align: middle; text-align: center; } .centerAlign { text-align: center; } .margin2x { margin-bottom: 24px; } .margin1x { margin-bottom: 12px; }
<!doctype html> <html> <head> <meta charset="utf-8"> <title>mAdjetey is getting an upgrade</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="index_files/mine.css" rel="stylesheet" type="text/css"> <link rel="shortcut icon" href="index_files/favicon.png"> </head> <a name="tepin"></a> <div class="display" align="center"> <img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign"> </div> <div class="display"> <div class="w3-topbar"> <a href="email.html"><img src="index_files/icon_email.png" alt="Email"></a> </div> </div> <div class="display" align="center"> <a href="#tepin" class="button">Back to top of page</a> </div> </html>
2 answers
solution1
0 2018-05-30 13:08:31
theres several ways but in this example I'm applying "display: block" to the image so that it can use the margin property.
/* CSS */
.display img {
display: block;
padding: 0;
/* maybe some top margin too? margin: 30% auto 0 */
margin: 0 auto;
width: auto;
}
<!-- HTML -->
<div class="display" align="center">
<img src="index_files/uc_main.png" style="max-width:100%" height="auto" alt="Website under redesign">
</div>
solution2
0 2018-05-30 13:20:31
The align attribute is not supported in HTML5. Use CSS instead.
.className{
text-align:center
}
Or you can always use display flex
.className{
display:flex;
justify-content:center
}
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.