Position the text at the upper center of the div and the button at the bottom

I've got a div container structured like so:

<div class="text-offer_dos">
       <div class="centrar">
        <h3>Lorem ipsum dolor!</h3>
        <h5></h5>
        <p class="text"><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</b></p>
        <button class="btn btn-default btn-deal" itemprop="potentialAction" data-codigo="sieteporseis">Donec vitae</button>
      </div>
    </div>

My goal is to align the text at the top center of the div and position the button at the bottom.

The following CSS code didn't yield the desired result:

.centrar {
    background-color: rgb(0,0,0, 0.5);
    height: 390px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

I'm seeking a solution using purely CSS without modifying the HTML structure.

htmlcssflexboxbootstrap-4

Answer №1

Give this a shot

.centered {
    background-color: rgba(0, 0, 0, 0.5);
    height: 390px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 50px;
    position: relative;
}
.centered > button.btn:last-child{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
<div class="text-offer_two">
       <div class="centered">
        <h3>Lorem ipsum dolor!</h3>
        <h5></h5>
        <p class="text"><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</b></p>
        <button class="btn btn-default btn-deal" itemprop="potentialAction" data-codigo="sevensix">Donec vitae</button>
      </div>
    </div>

Answer №2

Utilize a column flexbox and align it horizontally by using align-items: center, then move the button to the bottom with margin-top: auto - view the demonstration below:

.centered {
  background-color: rgba(0, 0, 0, 0.5);
  height: 390px;
  display: flex;
  flex-direction: column; /* setting column direction */
  align-items: center;
}

.centered button { /* This will place the button at the bottom */
  margin-top: auto;
}
<div class="text-offer_two">
  <div class="centered">
    <h3>Lorem ipsum dolor!</h3>
    <h5></h5>
    <p class="text"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b></p>
    <button class="btn btn-default btn-deal" itemprop="potentialAction" data-codigo="sevensix">Donec vitae</button>
  </div>
</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

Can you help me understand how to use Excel/VBA to extract data from an external website based on Element ID?

Currently, I am attempting to extract data from external websites using VBA based on element IDs and then adding this information to an Excel table. The URLs of the websites are listed in column A, while columns B and C will hold the retrieved values. Che ...

htmlexcelvba

What are the steps required to play a YouTube video using Selenium WebDriver?

In my Python script, I am trying to play/pause a YouTube video using driver.find_element_by_name("body").send_keys('keys.SPACE'), but it doesn't seem to work. Is there any alternative method I can use? Since the Selenium method is ...

pythonhtmlseleniumselenium-webdriverselenium-chromedriver

Preselecting items in PrimeNG Checkbox: A step-by-step guide

How can I ensure that the already selected item is displayed upon loading this div? The code in `rp` consists of an array of type Permission with one element, which should be automatically selected. What could be causing the issue? Here is the HTML snippe ...

htmlangulartypescriptcheckboxprimeng

Is there a way to adjust the transparency of individual words in text as you scroll down a page, similar to the effect on https://joincly

Is there a way to achieve a text filling effect on page scroll similar to the one found here: . The specific section reads: "Deepen customer relationships. Own the brand experience. Add high margin revenue. Manage it all in one place. Get back your pr ...

javascriptcssanimationscrollopacity

Tips for updating a button's text when clicked

One feature on my webpage is a "Read More" button that, when clicked, expands to reveal additional information (button not pressed). Here is how it appears once the user has clicked the button (button pressed). Despite my research on Stack Overflow, I have ...

javascripthtmlcss

I seem to be having issues with the downloaded files for Bootstrap 4. Is there something I am

After creating a site with Bootstrap 4 and downloading all the necessary files, I encountered an issue where Bootstrap was not functioning properly. Strangely, when using the CDN version of Bootstrap, everything worked perfectly. Could I be overlooking som ...

javascriptcssbootstrap-4file-structure

The image is refusing to adjust according to CSS settings

Why won't the image adjust to the CSS? I'm trying to move the picture to the side a bit by adding margin, but it's not working out. Any ideas? HTML <div class="la"> <center> <h1> GREET THE TEAM </h ...

htmlcss

Turn an entire div into a clickable element with a functional :active CSS rule that is compatible with IE10

I am currently working on designing a clickable panel for an html app that will include multiple text elements and images. Based on my understanding, this is typically achieved using a div. An example of this would be: <div class="myButton"> &l ...

htmlcssinternet-explorer-10

Include ellipses for child elements within a parent div set to a specific height

I need help with a design issue involving a parent div that has a fixed height, overflow hidden, and multiple child divs inside. How can I display an ellipsis after the visible child divs to indicate that there are more divs present? Here is the code I ha ...

htmlcssellipsis

An issue with Safari rendering when using border radius with varying border width and color

I am looking to create a unique box design that features borders on the left and right sides with rounded corners. I also want to have different colors for each border. When viewing the box in Chrome, the corners appear correctly except for some thin whit ...

csssafarirenderingborder-radius

information that appears for various URLs upon being clicked

Hey, I have a question regarding some Javascript and jQuery code that I could use your help with: jQuery: $(document).ready(function () { $( '.website' ).popover( { 'trigger' : 'hover', ...

javascriptjqueryhtml

Struggling to confirm the validity of a number using React and Bootstrap

Seeking assistance with validating an HTML-Input field in React to only allow numbers. Here is my current attempt: How can I configure the Input field to accept only numerical values? phone: { elementLabel: 'Phone Number', elementType: ...

reactjsbootstrap-4

Resources for ExpressJS

New to ExpressJS and trying to figure out how to reference images stored in the /public/images/ directory in my /public/stylesheets/styles.css The code snippet below doesn't seem to be working for me: .home-bg { background-image:url('../ima ...

cssnode.jsexpress

Run a function upon clicking a button in JavaScript

Could someone please help me figure out what I am doing incorrectly in the code below? I am attempting to trigger a function when a button is clicked. The HTML: <button id="btn1">Press me!</button> <input type="button" id="btn2" value="Pr ...

javascripthtmlfunctionbuttonunobtrusive-javascript

Attach image to the edge with a responsive layout using Bootstrap

I'm currently working on a project that involves the following elements: https://i.sstatic.net/rAZ0x.png I have images for the left and right sections, as well as an image of a monkey. My goal is to create a layout where the left image occupies col- ...

htmlcssbootstrap-4

Spin the div towards the location of the mouse

Is it possible to create a rotating effect on a div element based on the position of the mouse pointer? I envision the div displaying <- when the mouse is on the left side, and -> when the mouse moves to the right, regardless of direction. If anyon ...

jqueryhtmlcss

Is there a way to toggle the visibility of the angular material toolbar at regular intervals?

I'm currently experimenting with the CSS animation feature to display and conceal the angular material toolbar in this demonstration. Inside the application component, the hide attribute is toggled at intervals as shown below: hide:boolean = false ...

javascriptcssangulartypescript

How can I determine in JQUERY when all ajax requests on a page have finished processing?

Is there a way in JQUERY to determine when all ajax calls on a page have finished? I need to run a specific method once all the ajax calls are done. ...

javascriptjqueryhtmlajax

Create another div for the remaining vertical space occupied by the sibling div?

I currently have 3 different divs nested within each other: <div class="a"> <div class="b"> </div> <div class="c"> </div> </div> Here is the current CSS styling applied to these divs: .a { hei ...

htmlcss

Is it better to use one large CSS file for Angular 2 or opt for separate files per component

When working with Angular 2, the choice of how to style your application is an important decision. Should you create one large minified .css file using a task runner like Gulp, or use Angular 2's styleUrls: ['myfile.css'] for each component? ...

cssperformanceangular