Ways to position two images in the center

A website has been created by me and now I am looking to center text on the two images in the header. Here is the relevant code snippet:

<div class="header">
    <img src="css/title578145459.png" class="headerImage left"/>
    <img src="css/title756941752.png" class="headerImage right"/>
    <span class="headerText">Ubytovna Stavařov Přerov</span>
</div>

And the corresponding CSS:

.headerImage {
    width: 50%;
    height: 100%;
}

.header {
    position: relative;
    height: 190px;
    text-align: center;    
    padding-top: 5px;
    opacity: 0.8;
}

.headerText {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    color: yellow;
    font: normal 3em sling;
    font-style: oblique;
}

I have experimented with different values for top and bottom, as well as adjusting the padding and margin, but none of these solutions have resolved the issue.

htmlcsspositioning

Answer №1

Ensure that the z-index value for .headerText is set to a positive number. By using Chrome dev tools, I confirmed that the text is visible when configured like so:

.headerText {
position: absolute;
top: 120px;
left: 0px;
right: 0;
z-index: 1;
}

Answer №2

Give this a shot

.headerText {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
z-index: 1;
}

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

Showcasing particular id or class within a different id upon clicking a link

These are the links I have available: <a href="#home">Home</a> <a href="#about">About</a> <a href="#portofolio">Portfolio</a> <a href="#contact">Contact</a> I would like the user to click on any of these l ...

jqueryhtml

Nested divs with independent scrolling capabilities

I am interested in developing a gantt chart that displays days, months, and years at the top with tasks listed below. Here is my progress so far: https://i.stack.imgur.com/tr5y4.png In the image above, the scroll-x functionality works on everything incl ...

htmlcssscrolloverflowparent-child

Navigating with a Stuck Navigation Bar Using BootstrapretaF

My website has a sticky navbar with a dropdown menu that allows users to jump to different sections of the page. However, I've noticed that when I navigate to a new section, the navbar covers part of the content at the top. After inspecting the navbar ...

htmlcssbootstrap-4

Ways to adjust the brightness of any color when hovered over

Is it possible to create a universal effect where an element becomes darker or lighter when hovered over, regardless of the initial color? Here is an example: .change-color{ Background:green; width:100px; height:100px } .change-color:hover{ Background ...

javascriptjqueryhtmlcss

Ways to verify audio in several HTML5 video files

I am working on a way to determine if multiple videos have audio or not. Here is an example of what I have so far: https://jsfiddle.net/hrd4a0c3/ However, my current solution only checks one video at a time. I am looking for a way to extend this functiona ...

javascripthtmlaudiovideo

What is the best way to align the bottom of the last child of a flex element?

Current: Desired: Is it possible to achieve this using the flex or grid model, or do I need to reconsider the structure with a different approach? Below is the code snippet: .sections { display: flex; flex-direction: row; flex-wrap: wrap; jus ...

htmlcssflexbox

Elegant Popup Form

I'm encountering a problem with my ajax form that is embedded within a bootstrap modal. On the first use, the form functions correctly. However, when I attempt to use it again without refreshing the page, the text area no longer appears within the mod ...

jqueryhtmlajaxbootstrap-modal

Can someone please explain how to apply various fonts to the text in a `<p>` paragraph using CSS and HTML?

Take a look at this image Can you provide guidance on how to incorporate various fonts within a paragraph, like the example shown in the image above? I am experimenting with the "Creative Corner" section. ...

htmlcssfonts

Achieving consistent text alignment in HTML and CSS without relying on tables

As I delve into the world of HTML and CSS, I've taken a traditional approach by crafting a login page complete with three input controls (two text inputs and one button). To ensure proper alignment of these elements, I initially turned to the trusty & ...

javascripthtmlcssuser-interface

Unable to expand Bootstrap navbar due to collapsing issue

I recently implemented a collapsed navbar on my website using bootstrap. However, I'm facing an issue where it does not open when clicking on the hamburger menu. After researching various solutions for this problem and trying them out, none of them s ...

javascriptjqueryhtmlcsstwitter-bootstrap

Adjust: Return scale to default

By applying transform: rotate(-2deg); to a section, I have created an effect where the section rotates slightly. Additionally, when the user hovers over the same section, it increases in size due to transform: scale(1.1);. However, on one specific page of ...

htmlcsscss-transforms

What are some alternative ways to create a text field with the same style as Material UI's without relying on the Material UI

With the power of HTML, CSS, and Reactjs I am aiming to create a functionality where the placeholder animates up to the border upon clicking on the text field An example can be seen with Material UI text field: https://material-ui.com/components/text-fie ...

htmlcssreactjsmaterial-ui

Selecting multiple items in jQuery based on different attributes is a useful feature that

I am looking to choose multiple items based on their data attribute. Each item has a unique data-id. <div class="foo" data-id="1"></div> <div class="foo" data-id="2"></div> <div class=" ...

htmljquery

Apply CSS styles conditionally to an Angular component

Depending on the variable value, I want to change the style of the p-autocomplete component. A toggle input determines whether the variable is true or false. <div class="switch-inner"> <p [ngClass]="{'businessG': !toggle }" clas ...

htmlcssangulartypescriptprimeng

The variable is only recognized within the function and not outside of it

Seeking assistance as a newcomer in debugging and implementing code, I have been trying various approaches to pass a base64string into JotForms for generating images in PDF format. Below is the screenshot of the error encountered. View error here The foll ...

javascripthtmlfunctionvariablesjotform

Creating a toggle button for a div element to expand and collapse its content: Step-by-step guide

For my e-commerce site selling musical instruments, I'm designing a product landing page that showcases guitars, keyboards, violins, and cellos. As part of the design, I want to include expandable sections with detailed information about each instrume ...

javascripthtmlcssfrontend

What is the best way to delete the pipe separator from the initial item in a list on the line?

I have a list of items separated by pipes that spans multiple lines. I am looking to use jQuery to remove the pipe separator for the first item on each line. Example: Red | Green | Blue Purple | Black | White Violet | Yellow | Magenta Here is the code ...

jquerycss

I am currently encountering a problem in my attempts to retrieve data from mongodb

I'm having trouble retrieving some data from my database, and I'm not sure why it's not displaying correctly. Any help or feedback would be greatly appreciated! // Below is the code for my router: router.get('/add', (req, re ...

htmlnode.jsmongodbejs

Present information from a list in a table format

My webpage contains a single table where I want to showcase an image in row1 along with its details. As each image is displayed, its corresponding details are added to a list. There are a total of 27 images spread across 9 rows in the table. Once all the ...

c#asp.nethtmlasp.net-mvc

"Struggling to divide CSS Code with PHP containing nested brackets? Here's how you can tackle it

I'm currently attempting to break down my CSS code stored in variables, but I consistently encounter issues when dealing with media queries or similar elements. While I don't require every single rule to be outlined, I am looking for a solution ...

phpcssparsing