Content is not centered and remains at a consistent size

My struggle is with changing the font size and alignment on my website. Despite numerous attempts, I can't seem to get it right. The text is currently left-aligned when I want it centered, and I also need it to be larger in size. Take a look at my code below!

HTML

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

...

<div class="qt">
    <?
        $filename = "quotes.txt";
        function RandomLine($filename) { 
            $lines = file($filename); 
            echo $lines[array_rand($lines)]; 
        } 
        echo RandomLine($filename);
    ?>
</div>
<div class="home">
    <a href="http://www.jonsnow.net/index.php" id="h1"></a>
    <a href="http://www.jonsnow.net/gallery/" id="h2"></a>
</div>

CSS

div.home a {
    float: left;
    display: inline;
}

div.home img {
    float: top;
    display: inline;
}

div.home {
    position: absolute;
    top: 20%;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1000px;
    margin: auto;
}

div.qt {
    text-align: "center";
    font-family: "Vivaldi";
    font-size: "44 px";
    color: "#000000";
    position: absolute;
    top: -60%;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1000px;
    margin: auto;
    height: 62px;
    display: inline;
}

div.home #h1 {
    width:  500px;
    height: 350px;
    display: inline;
    background-image: url('header1.jpg');
}

div.home #h1:hover {
    background-image: url('header1hover.jpg');
}

div.home #h2 {
    width:  500px;
    height: 350px;
    display: inline;
    background-image: url('header2.jpg');
}

div.home #h2:hover {
    background-image: url('header2hover.jpg');
}

Answer №1

Remove the quotation marks from

center

within your CSS file. Additionally, consider removing the font-size and color properties.

Answer №2

Here is the updated code:

div.qt {
    text-align: center;
    font-family: Vivaldi;
    font-size: 44px;
    color: #000000;
    position: absolute;
    top: -60%;
    bottom: 0;
    left: 0;
    right: 0;
    width: 1000px;
    margin: auto;
    height: 62px;
    display: inline;
}

Answer №3

There seems to be an additional issue here, specifically in the CSS selector div.home img {}. The property float:top; is being used, however, it should be either float:Left, Right, None or Inherit as float:top; is not a valid option.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to adjust table size in MPDF to fill the available height

I'm currently utilizing MPDF in order to create a PDF document from an HTML page that includes a table. My goal is to have the table expand to fill up the remaining space on the page. Here is the specific table I am working with: I want the final el ...

Having trouble identifying the CSS style being applied to a specific element

In this image, a red border is seen on the input fields indicating an error with some CSS style being applied. Despite this, it is difficult to determine which CSS selector is causing this as Firebug does not reveal any applied styles. https://i.stack.img ...

unable to attach picture to the img element

Currently, I am honing my skills in Windows Phone development through WinJS. In my latest project, I have crafted a code snippet that parses JSON data fetched from a specific URL. The objective is to bind the images retrieved to a list view on an HTML page ...

Layering an object on top of a clone using CSS

I am working on a webpage with a jQuery menu located at the following link: Menu To accommodate more items and have greater control, I duplicated the menu twice. However, when hovering over them, the duplication is visible in the background. Is there a ...

What steps should I take to fix the "loading page" issue in VS2010?

Upon attempting to debug (F5) my website, I encountered the following error message: "Firefox cannot locate the server at www.localhost.com." Switching to IE did not resolve this issue either. Any suggestions on how to fix this problem would be greatly ...

When you click on the "email" link, the Email app will automatically launch

Is there a way I can make the "EMAIL" text clickable in HTML, so that it automatically opens an email app or site and inserts the clicked email into the "To:" field? ...

`Why are my overflow-x and flex-wrap not functioning as expected in React JS?`

Having trouble aligning all the movie posters in a single line? It appears that your overflow-x and flex-wrap properties aren't functioning as expected in your App.css. Here's a snippet of your App.css: body { background: #141414; color: ...

Determine the placement of the body with CSS styling

Here is the code snippet from my website: body { background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .centered { /* Center entire body */ display: flex; ...

Is it possible for comments in HTML and CSS to cause issues with rendering?

Could HTML or CSS comments potentially lead to rendering issues? HTML Comment Example: <!-- additional details --> CSS Example: /* more information */ ...

Ensure that every closing curly brace is followed by a new line character

I'm utilizing a piece of code I stumbled upon online to condense my css files and it's working well, but there's a slight regex problem that's causing me some difficulty. $css = preg_replace('/([\\w#\\.\&b ...

On iPhones, the links display as oversized blank containers

Recently, a client who switched from an Android phone to an iPhone reached out to me with a complaint. She mentioned that the links on her website, which I built for her, appear as large empty boxes. You can view her website here. To illustrate the issue ...

What is the best way to display table headers for each record on mobile devices? Is there a way to create a stacked view

I recently started working with bootstrap, specifically version 3. I am currently trying to find a way to create a layout that resembles a regular table when viewed on desktop but switches to a stacked format on mobile devices. This is the design I am aim ...

"pre and post" historical context

Is there a way to create a stunning "Before and After" effect using full-sized background images? It would be amazing if I could achieve this! I've been experimenting with different examples but can't seem to get the second 'reveal' di ...

Center text vertically within a div using CSS

I need assistance with aligning my text vertically centered and left aligned to the logo in my HTML & CSS code. How can I achieve this with the code provided? Link to Fiddle: http://jsfiddle.net/z6yet59f/ .slogan { background:#eaeaea; float:lef ...

Issue with Flask form submission in a specific scenario but functioning correctly in a different context

I'm currently working on a flask website, and I'm facing an issue with the SubmitField not functioning when I click it. I tried a similar method with a smaller form and it worked, but for this specific case, it's not working. routes.py from ...

The feature to disable legend click in Chart.js does not activate unless the specific condition is met

I am working with chartjs and have encountered a scenario where I need to disable actions when a legend item is clicked, but only under certain conditions. I was able to accomplish this using the following code snippet: legend: { position: 'right& ...

Starting the animation only when the slide is visible

Struggling to add animations dynamically as a HTML/CSS developer who avoids JS but uses jQuery occasionally? Sound familiar? Well, I have. Recently, I managed to create a CSS-3 animation for the images in a Bootstrap carousel. Check out the code below: ...

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

Currently, I am conducting accessibility testing for an Angular project at my workplace. Our team relies on the JAWS screen reader and a helpful plugin that detects UI issues and highlights them as violations. Unfortunately, I've come across an issue ...

Having trouble getting Tinymce to appear on the screen

I am currently attempting to install TinyMCE for use with my text editor in order to provide the user with a text box similar to the one on Stack Overflow. However, I am encountering an issue where it is not displaying as expected. In the header of my ind ...

Is it true that eliminating white spaces can enhance a website's loading speed?

I'm curious about something. Can removing white space actually make a website load faster? For instance, take a look at the following CSS snippet - body{ overflow-wrap:break-word; word-break:break-word; word-wrap:break-word } .hidden{ display:none } . ...