How come my image isn't cooperating with text-align and vertical-align?

Hey everyone! I'm a newcomer to this community and a newbie when it comes to HTML. :D

I encountered a problem recently and discovered that Stackoverflow is full of amazing developers. That's why I've decided to share my problem here and am eagerly awaiting your assistance!

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cafe</title>
    <style>
    #container {
        width:550px;
        height:733px;
        position:relative;
    }

    img#containerImage {
        position:absolute;
        left: 0;
        top: 0;
    }

    h1#header {
        z-index: 100;
        position: absolute;
        color: white;
        font-size:24px;
        font-weight:bold;
        border:1px solid red;
        margin: 0px;
        vertical-align: middle;
        text-align: center;
    }
</style>
</head>

<body>
    <div id="container">
        <img id="containerImage" src="olgagonggam.jpg"/>
        <h1 id="header">Cafe</h1>
    </div>
</body>
</html>

This is the code I've written. I'm puzzled as to why the text isn't centered/middle aligned, and how can I rectify this issue? Currently, the text is displayed on the top left corner of the page, but my intention is for it to be centered on the image. Can someone lend me a hand, please? :D

htmlcssalignment

Answer №1

If you have the size of the image and h1 element, positioning them in pixels is straightforward. You can place the left side of the h1 at half the image width (275px) minus half the width of the h1 (30px), and the top at half the image height (367px) minus half the height of the h1 (15px).

#container {
  width: 550px;
  height: 733px;
  position: relative;
}
img#containerImage {
  position: absolute;
  left: 0;
  top: 0;
}
h1#header {
  z-index: 1;
  position: absolute;
  left: 245px;
  top: 352px;
  width: 60px;
  line-height: 30px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  border: 1px solid red;
  margin: 0;
}
<div id="container">
  <img id="containerImage" src="http://lorempixel.com/550/733" />
  <h1 id="header">Cafe</h1>
</div>

If you prefer not to hard-code the sizes in pixels, it becomes more complex. I devised this solution without the border around the h1.

#container {
  width: 550px;
  height: 733px;
  position: relative;
}
img#containerImage {
  position: absolute;
  left: 0;
  top: 0;
}
h1#header {
  z-index: 1;
  position: absolute;
  top:50%; left:0; width:100%;
  color: white;
  font-size: 24px; line-height:0;
  font-weight: bold;
  text-align:center;
}
<div id="container">
  <img id="containerImage" src="http://lorempixel.com/550/733" />
  <h1 id="header">Cafe</h1>
</div>

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

Ensure that the top of a div stays in place as the user scrolls, and spans the entire width of the div

My goal is to create a sticky or fixed position header inside a div with a list, but I'm facing an issue where it only sticks to the width of the text. If I expand the width to 100%, it takes up the size of the entire page: import styled from 'st ...

htmlcssreactjsstyled-components

Influence the behavior of surrounding elements as we move our cursor over them

I want to create an effect where I have two images, with the first one hidden initially. When we hover over the second image, the first image should become visible. Here are the codes and class names related to the images: <div class="entrycontent"&g ...

javascriptjqueryhtmlcsshover

What is the best way to display a segment of an SVG on a Canvas element?

Main Issue: The main objective here is to display a specific part of an SVG image on a fixed size Canvas element within a web page. Approach I Tried: After considering various options, such as using CanVG, I thought about utilizing the viewBox attribute ...

javascripthtmlcanvassvg

In responsive design, the sidebar may be positioned either above or below the content, depending

Managing the placement of a sidebar in a responsive design can be tricky, especially when the sidebar content is crucial on some pages but not on others. One solution may involve switching the order of div elements in the HTML code, but this approach might ...

htmlcssresponsive-design

Inspect HTML elements using Jinja2 placeholders

I am a beginner in the world of web development, currently learning how to create Flask webapps. I am using Atom along with some addons like PreviewHTML to help me visualize live previews of my HTML code. However, I am facing an issue where I cannot see a ...

pythonhtmlflaskjinja2atom-editor

1. "Customizing Navbar height and implementing hover color for links"2. "Tips for

Having issues adjusting the height of my Navbar - when I try to do so, the collapse button doesn't function properly. I've attempted setting the height using style="height: 60px;" and .navbar {height: 60px;} but the collapse menu stops ...

htmlcss

I can't seem to figure out why my container is not centered on the screen, despite setting the margins (left and right) to auto

Hey there, I'm a beginner in programming and currently experimenting with the CSS vertical text slide animator feature. However, when the animation runs smoothly, I noticed that the text appears disproportionate and not properly centered on the screen ...

htmlcss

Avoid activating jQuery functions based on certain screen widths for menu/navigation system

Recently, I've delved into the world of jQuery and attempted to create a simple menu system. The menu is designed to expand its submenu when hovering over the list item at screen widths larger than 480px, and to expand when clicking on the list item a ...

javascriptjqueryhtmlcssnav

Tips on creating a horizontal scrolling effect using the mouse

Is there a way to enable horizontal scrolling by holding down the mouse click, instead of relying on the horizontal scroll bar? And if possible, can the scroll bar be hidden? In essence, I am looking to replicate the functionality of the horizontal scroll ...

javascriptjqueryhtmlcss

What is the best way to create a border that surrounds a collection of pictures?

I'm currently facing a challenge in getting a border to perfectly fit around a collection of images. The issue can be observed in this Jsfiddle I shared, where the border aligns with the top and left edges, but not with the bottom and right edges. Her ...

htmlcssimageborder

JavaScript button not responding to click event

Here is the initial structure that I have: <section id="content"> <div class="container participant"> <div class="row"> <div class="input-group"> <div class="input-group-prepend"> ...

javascripthtml

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss

What steps should I take to repair this array table?

I've created a simple array table that uses 3 user-defined values to determine the value of a variable. Although I've written similar code in the past, I'm having trouble figuring out why this one isn't working. The table is quite large ...

javascripthtmlarraysvariables

Align the items at the center of a Vue Router Link

I am looking to design a navigation bar that includes router-link items, with each item displaying an icon on the left side and text on the right side. An example of this design can be seen in the Firebase navigation bar. https://i.sstatic.net/eg328.png ...

cssvue.js

Unordered list not floating properly - successful in JSFiddle but not displaying correctly in web browser despite updating Chrome and Firefox

Having trouble floating an unordered list? Check out this jfiddle example that aligns a list next to some text: Here is the updated jfiddle link: https://jsfiddle.net/8qzygaog/ I created a test document based on the example, but it's not working as ...

htmlcsscss-floathtml-lists

What is the process to transfer data from JavaScript to HTML within a Laravel environment?

I am attempting to transfer a value from JavaScript to HTML as a variable. In order to do this, I am retrieving the value from a Laravel PHP controller. JavaScript $("ul.nav-tabs > li > a").click(function() { var id = $(this).attr("href").repla ...

javascripthtmllaravel

Ways to categorize items using JQuery based on their hierarchical structure

I am looking to organize the following HTML content: <h2>State the Issue  </h2> <h3>Provide information about your objective</h3> <h3>Share any error messages received</h3> <h2>Outline Your Attempts  ...

javascripthtmljquery

Retrieve the HTML data and save it as page.html, displayed in a VueJS preview

After developing an innovative VueJS-based application for managing front-end content, I am now eager to enhance it with a 'download' button feature. This new functionality will allow users to easily download the previewed and edited content in H ...

javascripthtmlvue.js

Interactive Javascript dropdown helper on change

I am currently experimenting with a JavaScript onchange method, as I am relatively new to coding. My goal is that when I select "ID Type," the input text should change to "passport," and when I select "South African ID," the input should switch to "South ...

javascriptphpjqueryhtmlangularjs

What could be causing the uneven alignment and padding of texts in my input box and select box in Bootstrap 5?

I'm facing a challenge that has me stumped. I have a form with a text input and a select drop-down, all styled using Bootstrap 5. My goal is to reduce the default left padding on these form controls by adding padding-left:0.3rem to my style definition ...

cssbootstrap-5