Centering text and ensuring it is the perfect size on a webpage using HTML/CSS

Question

Centering text and ensuring it is the perfect size on a webpage using HTML/CSS

I am currently constructing a website as part of a class project at my school. After finalizing the design for the site, I have now moved on to the development phase.

Among the various stylesheets available, I have settled on "Roboto Slab" which gives the desired look and feel to the website. Most of the main page has already been crafted by me.

However, I am encountering one persistent issue while attempting to format the text. Despite my efforts to position the text exactly in the center of the webpage, it appears slightly lower than expected. Additionally, there seems to be an unnecessary horizontal scrolling option present.

Below is the code snippet for the website:

<html>
<head>
    <title>MySite</title>
    <meta name="description" content="My Site.">
    <link rel="stylesheet" href="core.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style> 
        css code here
    </style>;
</head>
<body>
    body content here
</body>
</html>

I am puzzled as to why this issue persists despite trying different methods such as align: center. Can anyone provide some insight into this matter?

!! EDIT !! Successfully resolved font size problem. Hooray for me! Added a new section in the CSS script for H2 elements.

html css web

Answer 1

Answer №1

To center the content, you should add a new div in your HTML code.

<i class="do-you-even-flexbox"></i>

<div class="container">
    <div class="box">
         <h1>Hi.</h1>

         <h2>This is the website for my independent study.</h2>

    </div>
</div>
<div class="links"> <a href="some_page_here">Example Page.</a>
 <a href="some_page_here">Another Page.</a>
 <a href="some_page_here">Another page! :D</a>
 <a href="derp">Blah blah</a>

</div>

After that, use CSS with flex-box to center the newly added "box" div.

html, body, .do-you-even-flexbox {
    height:100%;
width:100%;
overflow-x:hidden;
}
body {
    margin:0;
    font:normal 14px/1.2"Roboto", Helvetica, Arial, sans-serif;
    text-align:center;
    background:#111 url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') center top/ cover;
}
::-moz-selection {
    background:#2fdd11;
    color:#fff;
}
::selection {
    background:#2fdd11;
    color:#fff;
}
a {
    text-decoration:none;
}
a:hover, a:active {
    outline:none;
    text-decoration:underline;
}
a:focus {
    outline:thin dotted;
}
.do-you-even-flexbox, .container {
    position:relative;
    top:0;
    width:100%;
    height:100%;
}
.container {
    padding:8px 20px 15px;
    display:flex;
    align-content:center;
}
.box {
    height:20%;
    margin:auto
}
h1, h2 {
    font-family:"Roboto Slab", Helvetica, Arial, sans-serif;
    margin:0;
    color:#000;
    font-weight:400;
    font-size:24px;
}
.social {
    margin-top:30px;
}
.social a {
    background-color:#F5F7FA;
    border-radius:35px;
    margin:0 3px;
    width:26px;
    height:26px;
    padding:16px;
    display:inline-block;
    -webkit-transition:background-color .6s ease;
    transition:background-color .6s ease;
}
.social a:hover, .social a:focus {
    outline:none;
    background-color:#FC6E51;
}
.icon {
    width:26px;
    height:26px;
}
.icon>path {
    fill:#111;
}
.links {
    color:#333;
    margin-top:30px;
}
.links a {
    display:inline-block;
    padding:0 5px;
    color:#000;
}
.links {
    color:#000;
}
.links a:hover {
    color:#000;
}
@media (max-width: 660px) {
    h1 {
        font-size:64px;
    }
    h2 {
        font-size:24px;
    }
}
@media (max-width: 460px) {
    .do-you-even-flexbox {
        display:none;
    }
    .container {
        margin:0 auto;
        margin-top:4%;
    }
    .links a {
        display:block;
    }
    h1 {
        font-size:48px;
    }
    h2 {
        font-size:16px;
    }
}
@media (max-width: 350px) {
    h1 {
        font-size:40px;
    }
}

I adjusted the heading tag sizes for demonstration purposes, but feel free to customize them according to your needs. You may also need to modify the box height for optimal centering. Check out the fiddle here

Answer 2

To center the content, you should add a new div in your HTML code.

<i class="do-you-even-flexbox"></i>

<div class="container">
    <div class="box">
         <h1>Hi.</h1>

         <h2>This is the website for my independent study.</h2>

    </div>
</div>
<div class="links"> <a href="some_page_here">Example Page.</a>
 <a href="some_page_here">Another Page.</a>
 <a href="some_page_here">Another page! :D</a>
 <a href="derp">Blah blah</a>

</div>

After that, use CSS with flex-box to center the newly added "box" div.

html, body, .do-you-even-flexbox {
    height:100%;
width:100%;
overflow-x:hidden;
}
body {
    margin:0;
    font:normal 14px/1.2"Roboto", Helvetica, Arial, sans-serif;
    text-align:center;
    background:#111 url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') center top/ cover;
}
::-moz-selection {
    background:#2fdd11;
    color:#fff;
}
::selection {
    background:#2fdd11;
    color:#fff;
}
a {
    text-decoration:none;
}
a:hover, a:active {
    outline:none;
    text-decoration:underline;
}
a:focus {
    outline:thin dotted;
}
.do-you-even-flexbox, .container {
    position:relative;
    top:0;
    width:100%;
    height:100%;
}
.container {
    padding:8px 20px 15px;
    display:flex;
    align-content:center;
}
.box {
    height:20%;
    margin:auto
}
h1, h2 {
    font-family:"Roboto Slab", Helvetica, Arial, sans-serif;
    margin:0;
    color:#000;
    font-weight:400;
    font-size:24px;
}
.social {
    margin-top:30px;
}
.social a {
    background-color:#F5F7FA;
    border-radius:35px;
    margin:0 3px;
    width:26px;
    height:26px;
    padding:16px;
    display:inline-block;
    -webkit-transition:background-color .6s ease;
    transition:background-color .6s ease;
}
.social a:hover, .social a:focus {
    outline:none;
    background-color:#FC6E51;
}
.icon {
    width:26px;
    height:26px;
}
.icon>path {
    fill:#111;
}
.links {
    color:#333;
    margin-top:30px;
}
.links a {
    display:inline-block;
    padding:0 5px;
    color:#000;
}
.links {
    color:#000;
}
.links a:hover {
    color:#000;
}
@media (max-width: 660px) {
    h1 {
        font-size:64px;
    }
    h2 {
        font-size:24px;
    }
}
@media (max-width: 460px) {
    .do-you-even-flexbox {
        display:none;
    }
    .container {
        margin:0 auto;
        margin-top:4%;
    }
    .links a {
        display:block;
    }
    h1 {
        font-size:48px;
    }
    h2 {
        font-size:16px;
    }
}
@media (max-width: 350px) {
    h1 {
        font-size:40px;
    }
}

I adjusted the heading tag sizes for demonstration purposes, but feel free to customize them according to your needs. You may also need to modify the box height for optimal centering. Check out the fiddle here

Answer 3

Answer №2

By placing the CSS file link before the style tag that sets h1 and h2 to have a font size of 96px, both headings end up having the same size. Simply move the line

<link rel="stylesheet" href="core.css">

below the <style> ... </style> section to differentiate the sizes of h1 and h2.

Answer 4

By placing the CSS file link before the style tag that sets h1 and h2 to have a font size of 96px, both headings end up having the same size. Simply move the line

<link rel="stylesheet" href="core.css">

below the <style> ... </style> section to differentiate the sizes of h1 and h2.

Answer 5

Answer №3

Your code has been modified in a fiddle, with unnecessary sections removed for clarity. You can easily add them back as needed to achieve your desired result.

JSFiddle Link

Modified HTML:

<div id="wrapper">
    <div id="container">
        <div id="centerText">
            <h1>Hi.</h1>
            <h1>This is the website for my independent study.</h1>
        </div>
    </div>
</div>

<footer>
    <div class="footer">
        <a href="#">Example Page.</a>
        <a href="#">Another Page.</a>
        <a href="#">Another page! :D</a>
        <a href="#">Blah blah</a>
    </div>
</footer>

Modified CSS:

html {
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

h1 {
    padding: 0;
    margin: 0;
}

body {
    overflow-x: hidden;
}

footer {
    bottom: 0;
    position: fixed;
    width: 100%;
}
/* Rest of the CSS styles remain same */

Answer 6

Your code has been modified in a fiddle, with unnecessary sections removed for clarity. You can easily add them back as needed to achieve your desired result.

JSFiddle Link

Modified HTML:

<div id="wrapper">
    <div id="container">
        <div id="centerText">
            <h1>Hi.</h1>
            <h1>This is the website for my independent study.</h1>
        </div>
    </div>
</div>

<footer>
    <div class="footer">
        <a href="#">Example Page.</a>
        <a href="#">Another Page.</a>
        <a href="#">Another page! :D</a>
        <a href="#">Blah blah</a>
    </div>
</footer>

Modified CSS:

html {
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

h1 {
    padding: 0;
    margin: 0;
}

body {
    overflow-x: hidden;
}

footer {
    bottom: 0;
    position: fixed;
    width: 100%;
}
/* Rest of the CSS styles remain same */

Centering text and ensuring it is the perfect size on a webpage using HTML/CSS

Answer №1

Answer №2

Answer №3

Similar questions

Web browsers are displaying code rather than the page itself

Effortlessly move and release Internet Explorer

Develop a JavaScript function to generate a multiple selection form

Unexpected UTF-8 Encoding Issue Found on Website Featuring French Content

At a specific point in the route, all CSS and JS links in Node.js vanish

Ensure that the child div fills the entire parent area when resizing the page

`How can I relocate an IFRAME within a DIV?`

Retrieve properly formatted text from the editor.document using the VSCode API

Rejuvenate a just-launched window.open starting from the about:blank

What methods are available for eliminating special characters from submitted data?

Tips for preventing words from being split between lines in an error message

Discover and locate inactive element using Selenium in Python

I'm attempting to make this script function correctly when an image is loaded

Find and choose the main div instead of the sub div in Robot Framework

Attach functions to elements added dynamically

Ways to modify the look of a checkbox when it is checked, without using extra elements

Using jQuery to select ASP control based on its dynamically generated Name attribute

Is there a way for me to set a different color for the background below the svg and a separate color above the svg? I am hoping to achieve this unique design effect

Refresh the HTML content as soon as a modification is detected in the MySQL Database

Sliding right is done by activating the Switch Function, while sliding to the left can be achieved by deactivating it with the help