Center align an item using flex and absolute positioning

I am facing an issue with my carousel where I am trying to display text at the center of it both horizontally and vertically. I attempted to use the flex display property but did not achieve the desired outcome.

.heroText {
  display: flex;
  position: absolute;
  align-items: center; // to vertically center the element
  justify-content: center; // to horizontally center the element
  z-index: 999 !important; // to ensure text is displayed above carousel
}

<div class="heroText">
  <p>farmers</p>
</div>
htmlcss

Answer №1

Utilizing CSS align-content will center the content itself, not the child elements. However, when using absolute positioning, the element is taken out of the document flow, so you cannot use both techniques simultaneously.

Consider this method for centering instead.

.heroText {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Keep in mind: If you're using position: absolute solely for implementing z-index, consider using position: relative as an alternative. This should allow flex-box to function as intended.

Answer №2

align-items and justify-content aren't positioning the element itself, but rather its children.

If you need to center an absolutely positioned element within its relative parent, consider adding the following to .heroText:

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Alternatively, change the display of the parent of .heroText to flex, and move the alignment and justification properties to that parent's class instead.

Answer №3

Utilizing flexbox allows you to easily set the direction to column and align the columns in the center without the need for unnecessary translations, especially when flex was already in use.

.heroText {
  width: 50%;
  height: 10em;
  border: 1px solid black;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
<div class="heroText">
  <p>farmers</p>
</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

What is the best way to reposition the main body content lower on the page when switching to mobile layout?

I am facing an issue where my website switches to mobile design at 850px, but the button I have on both desktop and mobile mode gets hidden under the header banner when it transitions to mobile design. I want to adjust the main body content of the website ...

htmlcssmedia-queries

Challenges with JavaScript calculations on dynamic HTML forms

Currently, I am immersed in a project focused on creating invoices. My progress so far involves a dynamic form where users can add and remove rows (as shown in the snippet below). I'm encountering an issue with my JavaScript and I could use some ass ...

javascripthtmlforms

Tips for moving an input bar aside to make room for another

Is it feasible to have two input bars next to each other and keep one open until the other is clicked, then the first one closes as well? I attempted using a transition with "autofocus," but the bar ends up closing when clicked on in my site. If anyone ca ...

javascripthtmlcssinputtransition

What is the best way to add multiple values to a single column but on separate rows?

Attempting to save the question and answer separately in different tables. Successfully stored the question text value, but encountering an error when inserting the answer value. Fatal error: Uncaught exception 'PDOException' with message ...

phphtmlmysql

Obtaining the field name from a SQL Server database by utilizing the field ID

When viewing my selections, I have several drop-down lists that display the ID and I would like the name to be shown to the user for clarity. However, when I list everything that has been added, it displays the chosen ID instead of the name. I attempted t ...

c#htmlcsssql-serverasp.net-mvc

Learn how to send dynamic data to another HTML element using Ajax's success function

I received a successful ajax response from one HTML file, but I'm struggling to dynamically set the data from this response to another HTML file. Can anyone help me with this issue? Here is the code snippet from my ajax report: success: function( ...

javascriptjqueryhtmlajax

Different body background color changes every second

I have a function called makeRandColor that generates a random color using RGB and template string literals. However, I am struggling to figure out how to make it work every second. I tried using setInterval but it doesn't seem to be functioning prope ...

javascripthtml

Adjust the dimensions of the embedded Google document

Currently, I am in the process of developing a website for my initial client and I'm encountering some difficulty in adjusting the size and background color of an embedded google doc. If anyone could provide assistance, it would be greatly appreciated ...

htmlcss

Strategies for detecting changes in multiple HTML select elements with jQuery

I currently have three select HTML tags and I would like to filter my table using the selected values (group of selected tags) with an AJAX request. For example, filtering by Gender, Location, and Season. My question is how can I achieve this without dup ...

jqueryhtmlajaxselect

Height transition animation in Angular 2 - maintaining state consistency

I am currently working with an animation code that is linked to my component. animations:[ trigger('slide', [ state('show', style({ height: '*' })), state('hide ...

cssangularanimation

There are no issues displayed on the login page of the Django Auth Views

Currently, I am utilizing Django Auth Views to set up my login page. Here is the URL specified: url(r'^login/$', auth_views.login, {'template_name':'users/login.html'}, name='login'), Below is the template used: ...

htmldjangojinja2

What is the best way to integrate my custom JavaScript code into my WordPress theme, specifically Understrap?

I am looking to enhance my website with a sticky navbar positioned directly under the header, and I want it to stick to the top of the page as users scroll down. Additionally, I want the header to disappear smoothly as the user scrolls towards the navbar. ...

javascriptphphtmlcsswordpress

Show the checkboxes' names listed in an array

I am having trouble displaying the names of my checkboxes using the foreach statement below. Currently, all I see is "on" for each checked box. I have included the code for one of the checkboxes and I am looking to see if there is anything I can modify i ...

phphtmllaravelcheckbox

Utilize JavaScript to implement CSS using an "if" statement

I am currently working on implementing iOS web app properties into my website. My goal is to create a <div> at the top of the page and apply specific CSS styles when a certain condition is met in a JavaScript script. Unfortunately, I am facing issue ...

javascriptioscss

Animate with jQuery to swap the positions of two floating divs

Hello, I recently made some updates to the code by adding 2 divs of different sizes. I am trying to achieve a switching animation using CSS floats for these divs. If you'd like to take a look at the current code, please visit - http://jsfiddle.net/jz ...

jqueryhtmlcssjquery-animatecss-float

Using .htaccess to Conceal Directories with Documents

It seems that my website is being targeted by individuals seeking to obtain all the code. I have implemented an .htaccess file that will display nothing when someone visits domain.com/images, but if they specifically request domain.com/images/logo.png, the ...

htmlcss.htaccessdirectory

hide input type with minimal display

Can someone help me find the less equivalent to this css code snippet? I'm not familiar with less and this code is part of a larger global css file that includes generated code from all less files. input[type="checkbox"] { display: none; } Any a ...

cssless

Last item in Material UI Grid container not filling up entire space

I designed a Grid container with 2 Grid columns, each containing 3 elements. However, I am facing an issue where the last element of each column is not appearing at the bottom as intended. What could be causing this problem? For reference, you can view th ...

cssflexboxmaterial-ui

Resizing the window causes divs to be positioned relative to the image (almost functional)

In my coding project, I've encountered a situation where I have 3 "pins" positioned within a div called #outerdiv. This div has a background-image and the pins are supposed to remain in the same spot on the background image no matter how the window is ...

jqueryhtmlcss

Grab the code snippet from JSFiddle

I apologize for the seemingly simple question, but I have been struggling with it. I tried looking at similar questions, but I couldn't find a solution. Despite copying the code from http://jsfiddle.net/sB49B/21/, I can't seem to get it to work ...

javascripthtmlcssjsfiddle