ensure text is aligned perfectly on image {CSS HTML}

How can I correctly position text on an image? I have three blocks of text that I want to align on the same line with the image, but I'm struggling with it :(

#banner {
        
        justify-content: center;
        height: 600px;
        margin-top: 100px;
        margin-left: 10%; }
    
    .banner-text {
        color: white;
        justify-content: center;
        justify-content: space-around;
        text-align: center;
        display: inline-block;
        position: absolute;
        flex-direction: column; }
    
    /*DownTown*/ 
     .flex-text {

       background-color: grey;    
       text-align: center;
     }

html

 <div id="banner"><img src="2525.jpeg">
        
           
           <div class="banner-text">
            <div class="flex-text text1">
               <h1><b>DownTown</b> 384 West 4th St Suite 108</h1>
            <div class="flex-text text2">
                <h1><b>East Bayside</b> 3433 Phisherman Avenue </h1>
            <div class="flex-text text3">
                <h1><b>Oakdale</b> 515 Crecent avenue Second Floor </h1>    
            
            </div>    
                </div>
                </div>
                </div>
            </div>    

This is how it should appear: 2

And here is my current attempt: https://i.sstatic.net/vZjE2.jpg

Answer №1

To improve your HTML markup, consider adding the image as a background using CSS instead of an img element within the #banner. This will eliminate the need for absolute positioning to place text over the image. Additionally, utilize flexbox for aligning the elements in your design.

#banner {
  background-image: url(https://picsum.photos/500);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-text {
  color: white;
  justify-content: space-around;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.flex-text {
  background-color: #222;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  height: 180px;
  padding: 20px;
  width: 200px;
  margin: 5px;
}

h1 {
  margin: 0;
}
<div id="banner">

  <div class="banner-text">
    <div class="flex-text text1">
      <h1>DownTown</h1>
      <span>384 West 4th St</span>
      <span>Suite 108</span>
      <span>Portland, Maine</span>
    </div>
    <div class="flex-text text1">
      <h1>DownTown</h1>
      <span>384 West 4th St</span>
      <span>Suite 108</span>
      <span>Portland, Maine</span>
    </div>
    <div class="flex-text text1">
      <h1>DownTown</h1>
      <span>384 West 4th St</span>
      <span>Suite 108</span>
      <span>Portland, Maine</span>
    </div>
  </div>
  
</div>

Answer №2

Your HTML code needs some adjustments, so I made some changes to it. Additionally, I modified the CSS accordingly, using flexbox for aligning items and background properties instead of images in HTML.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1200px;
  height: 100vh;
  margin: auto;
  overflow: hidden;
  padding: 1rem;
  background: #333;
}

#banner {
  margin-top: 100px;
}

.banner-text {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}


/*DownTown*/

.flex-text {
  background-color: rgba(0, 0, 0, 0.384);
  line-height: 4rem;
  padding: 4rem;
  margin: 0rem 2rem;
  text-align: center;
}
<div class="container">
  <div id="banner">
    <!-- <img src="2525.jpeg" /> -->

    <div class="banner-text">
      <div class="flex-text text1">
        <h1>DownTown</h1>
        <p>384 West 4th St</p>
        <p>Suite 108</p>
      </div>
      <div class="flex-text text2">
        <h1>East Bayside</h1>
        <p>3433 Phisherman Avenue</p>
        <p>(Norway Corner)</p>
      </div>
      <div class="flex-text text3">
        <h1>Oakdale</h1>
        <p>
          515 Crescent Avenue
        </p>
        <p>
          Second Floor
        </p>
      </div>
    </div>
  </div>
</div>

Answer №3

It seems like the issue at hand is with the structure of #banner, as it has two children. The properties set on #banner do not indicate that the two elements should overlap. This effect is being attempted through the use of position:absolute, which is one way to approach it. However, there are two alternative methods to achieve the desired outcome:

  1. Set the image as the background property for #banner and apply flexbox properties to banner.

body {
  margin: 0;
  max-width: 100%;
}

#banner {
  position: relative;
  height: 600px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#banner img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.banner-text {
  position: relative;
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: space-around;
}

.flex-text {
  background: #efefef;
}

h1 {
  font-size: 17px;
}
<div id="banner">
  <img src="https://cdn.slashgear.com/wp-content/uploads/2019/07/coffee_main_envat-1280x720.jpg">
  <div class="banner-text">
    <div class="flex-text text1">
      <h1><b>DownTown</b><br/> 384 West 4th St Suite 108</h1>
    </div>
    <div class="flex-text text2">
      <h1><b>East Bayside</b><br/> 3433 Phisherman Avenue </h1>
    </div>
    <div class="flex-text text3">
      <h1><b>Oakdale</b><br/> 515 Crecent avenue Second Floor </h1>
    </div>
  </div>
</div>

  1. To solve this issue, make sure to set the banner div to a relative position. Then, position the image absolutely to occupy the full width while giving the banner-text a relative positioning. Additionally, if the text isn't centered, ensure that the banner-text has a width of 100%.

I hope these solutions help resolve your problem.

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

What could be causing my try catch error to not display?

When using JSFiddle, I've noticed that the try-catch error message only appears when the JS code is within the <script> tags in the HTML tab. However, when it's placed in the separate JS tab, the try-catch error doesn't show up. An ex ...

How can I stop a child node from inheriting any css styles from its parent node?

Imagine a body element with a nested child element (like a div). The body element may have unique CSS styles that are not predetermined (they depend on the specific webpage accessed on the internet). The child element (e.g. div) has a set of fixed CSS s ...

What is the best way to capture the current URL and store it in a variable using VB and ASP.NET?

There is a form available for users to fill out and submit, and I have VB code that converts the submitted form into an email sent to me. In order to identify which page the submission is coming from, I am looking to assign the current URL to a variable th ...

Building an easy-to-use jQuery task list

I'm currently working on a basic to-do list in Javascript, but I've encountered an issue. When I check the checkbox, the style of the adjacent text doesn't change as expected. Instead, it's the heading text that is affected by the chang ...

Unable to adjust price slider on mobile device, bars are not sliding

I have been utilizing the jQuery slider from lugolabs.com for my website, and while it works flawlessly on desktop, it seems to have issues when viewed on mobile devices. You can check out the slider at this link: The library used for this slider is jQue ...

Animated scrolling does not function properly with external links that are fully qualified

Currently, I am working on the website julebord.bedriftsdesign.no and have added animated scroll functionality to this page: However, I have encountered a problem. The animated scroll works perfectly fine when using internal anchor links like (#myanchor). ...

Position an element in CSS relative to two other elements

Can an element be positioned horizontally in relation to one element and vertically to another using only CSS? I am attempting to include a dropdown menu in my navbar. However, the submenu is not aligning correctly. I want to position element A so that its ...

Displaying data from a PHP form

I'm working on a table that is populated with data from my controller. The issue I am facing is that only the first record, in this case Sephen C. Cox, does not redirect me when I click the "add employee" button. For all other records, the button work ...

Creating a dynamic and unique border design in MUI

Currently, I am working with React 17 and MUI version 5.6. My component requires the ability to dynamically add new borders to the parent container based on user input. While I have come across CSS tutorials that demonstrate how to achieve this effect usin ...

jQuery Draggable Slider Scale

Seeking a draggable ruler (meaning it scrolls on double click) similar to the one showcased in the following link: I would greatly appreciate any assistance in finding a library that can provide this same functionality. View image here: https://i.sstatic ...

Accessing variables in nested ng-repeats in Angular 1.x from a controller

Right now, I have an HTML page with nested ng-repeat and a variable named "isExpand" within the inner ng-repeat. I'm curious if there are any ways to update "isExpand" from the controller. Here is a sample HTML layout: <div ng-repeat="(key, value ...

Is it possible to scroll only a portion of a div element without relying on absolute positioning and when the

HTML: <div class="block"> <div class="header">Some text</div> <div class="content"> <p> Unique content goes here. </p> <p> More unique content for demonstration ...

When a user chooses an item, the ui-select dropdown appears hidden behind additional fields on the screen

In my AngularJS application, I am utilizing ui-select within a table that repeats rows using ng-repeat. The following code snippet displays how ui-select is implemented: <ui-select name="{{'selProperty' + $index}}" ng-model="thing.property" ...

Guide on triggering an open modal when clicking a link using jQuery

Creating a modal popup has always been my goal. After designing the CSS to style it, I found myself stuck as I lack knowledge in JQuery or JavaScript to code the functionality that animates and opens the modal upon clicking a button or link. Despite search ...

Find all instances of Javascript comments and delete them using Regular Express

Hey there! I'm currently working on removing all JavaScript comments (//) within the HTML document. Take a look at this example: <html> <img src="http://example.com/img.jpg" /> <script> //Some comments gallery: { enabled: t ...

How to align a search box to the right within a div using CSS in Bootstrap

Struggling to find the proper code to align my div element to the right of the page. Current alignment: https://i.sstatic.net/JoJu5.png Desired alignment: https://i.sstatic.net/xZWJ6.png Below is the code snippet: <h1 class="pb-2 mt-4 mb-2 border-bo ...

The Bootstrap modal's subtle opacity effect creating depth against the background

I am facing an issue with a bootstrap modal that is embedded inside a faded div. Strangely, once the modal is opened, it remains hidden behind the gray background, making it inaccessible. Code HTML <div> <button class="btn btn-primary" dat ...

Why are my multiple data-targets not functioning correctly in Bootstrap tabs?

When I attempted to create a navigation bar using Bootstrap 4 that toggles two divs when clicked on a nav-item, I discovered that you can include multiple #contents when using data-target. <a data-target="#tab-content-2, #cmcAGVL"> <nav> & ...

Issues with implementing Callouts CSS in Highcharts are causing complications

Currently, I am attempting to construct a callout, and I aim to format the callouts using CSS. Unfortunately, the CSS implementation seems to be malfunctioning for some unknown reason. Below is the HTML: <script src="https://code.highcharts.com/highch ...

Troubles arise when utilizing getChannelData to configure socket.io in web audio,

I'm facing a problem where my connection gets disconnected as soon as I execute the code source.buffer.getChannelData(0).set(audio);. This issue occurs when I transcode an audio file and send the audio buffer to the client using socket.io for playback ...