How can I center text both vertically and horizontally using CSS?

https://i.sstatic.net/ffLj8.jpg

My goal is to achieve a specific look, but I seem to be struggling with it. Here's what I currently have:

https://i.sstatic.net/MHcuD.jpg

Below is the code snippet I am working with:

.blog-lockup
max-width: 1000px
margin: 0 auto

.image
position: relative
+size(250px)

img
+size(250px)

strong
position: absolute
top: 60%
left: 0%
+size(70px)
text-align: center
background: $lightred-color

font-family: Verdana
font-size: 14px
font-weight: 400
font-style: italic

color: #FFF
<div class="blog-lockup">

<div class="blog-1">

<div class="image">
<img src="../assets/img/blog/blog-1/thumb.jpg">
<strong>04 SEP</strong>
</div>

<h5>Some Title Text with Love</h5>
<p class="author">by James Vibar</p>

<p>At vero eos et accusamus et iusto odio dignissimos
ducimus qui blanditis praesantium voluptatum deleniti
atque corrupti qtios dolores et quas molestias excepturi
sint occaecati cupiditate non provident</p>

<a href="#">Read More</a>

</div>
 </div>

Just FYI, I'm using Sass for this.

htmlcsssass

Answer №1

To ensure compatibility with older browsers, it is recommended to refrain from utilizing CSS3. This method is guaranteed to function seamlessly across all browser types.

An informative article on this topic can be found on CSS-Tricks. https://css-tricks.com/centering-in-the-unknown/

.date-container{            <-- Custom Red Box
  display: table;           <-- Container Display Set to Table

  .date{
    display: table-cell;    <-- Date Display Set to Table-Cell
    text-align: center;     <-- Text Alignment Centered
    vertical-align: middle; <-- Vertical Alignment in Middle

    padding: 40px;          <-- Padding Adjustments

  }
}

Feel free to explore the pen for demonstration purposes: http://codepen.io/luisreyes/pen/pjvrMj

Answer №2

When dealing with single lines of text or images, achieving alignment is a simple task. All you need to do is:

text-align: center;
vertical-align: middle;
line-height: 90px;

Take a look at the demonstration:DEMO PAGE

Answer №3

make your text align vertically with this method 

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

and for horizontal alignment, just apply 

.parentelement{
 text-align:center;
}

check out this resource, also use the "br tag" to break your sentences

Answer №4

.colored-box{

        background-color:blue;
        padding:10px 20px 10px 20px;
        margin-left:10px;
        position:absolute;
        bottom:150px;
        text-align:center;
}

Click this link to view the demonstration

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

Enhance your webpage with a stunning background video

I'm trying to add a background video that covers the entire screen but maintains a height of 400px, similar to the one shown here. Is there a way to achieve this without using JavaScript? Below is the HTML code I currently have: <div class="pr ...

htmlcsshtml5-video

What is the best way to format MarkDown content within a nextJs environment?

Markdown-it is successfully converting markdown to html in my Nextjs project. However, I am facing a styling issue with specific elements such as h2, h3, ul, and li. Here's the code snippet: <h1 className="text-3xl mb-3 leading-snug d ...

cssnext.jsmarkdown

Reposition the div element on mobile devices using media queries

Hello, I'm facing an issue on mobile with my website: dev site Today, I implemented a dropdown menu with flags to allow language switching. However, the dropdown in mobile is appearing under the hamburger nav bar. I was thinking of using media querie ...

htmlcssmedia-queries

Images are not appearing correctly on Chrome browsers when using Windows operating system

img tags seem to have unusual margins in Chrome, Edge, and Opera browsers, while Firefox displays them correctly. Queries What is causing these margins specifically in Chrome? The Devtool does not detect any margin properties. Is there a straightforward s ...

htmlcssgoogle-chromefirefoxwindows-11

Is there a way to conceal the filter section in a Power BI report?

I am currently utilizing a asp.net 4.5 web application in conjunction with Power BI Embedded to display my developed reports on PowerBI. Thankfully, this integration is functioning smoothly. My current objective is to conceal the "Filters" section located ...

c#cssasp.netpowerbipowerbi-embedded

Issues with Google Chrome truncating the end of lengthy pages

While working on a website project, I encountered an issue with Chrome where loading a lengthy page results in a strange box covering the bottom portion of the content. Interestingly, the same pages appear fine on Safari and Firefox, indicating that the pr ...

htmlcssruby-on-railsgoogle-chrome

What is the process for incorporating a Glyphicon into the placeholder of a search bar using HTML and Bootstrap 5?

Here's a screenshot taken from my webpage I am looking to enhance the search bar by adding a search Glyphicon using Bootstrap 5. How can I achieve this? ...

htmlcssbootstrap-5

The slick slider fails to function properly within a bootstrap dropdown menu

My bootstrap navigation includes a dropdown in which I want to integrate a slick slider. However, all the items get displayed together when the dropdown is opened. The slider functions properly outside of the dropdown and also works when the dropdown has ...

javascripthtmlcssbootstrap-4slick.js

Enlarging the modal overlay

My Angular/Bootstrap app features a small text area within a modal window that often contains lengthy content exceeding the size of the textarea and modal itself. I am looking to incorporate a button within the modal window that, when clicked, opens a lar ...

javascripthtmlangularjstwitter-bootstrapangular-ui-bootstrap

Tips for toggling the visibility of an element when a button is clicked in React

In my todo list, I need to display the details of each item when clicked on a button. There are two buttons available: "View Details" and "Hide Details". Below is the code snippet: class Todos extends React.Component{ construc ...

javascripthtmlcssreactjs

Any ideas on how to align the links in the navbar at the center of the image instead of having them at the top?

<!DOCTYPE html> <html> <head> <title>Funky Munky Arcade</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha ...

htmlcsstwitter-bootstrap

Using Jquery to add elements one by one

Here is the Code for my project: Displayed below is the content of my CSV file: Item, Quantity, Price; LED, 100, $10; PIR, 1, $5; DS18B20, 10, $5; This segment showcases the jquery file I've composed: $(document).ready(function() { $.ajax({ ...

jqueryhtmlajaxcsvhtml-table

Can someone explain the purpose of `svg:not(:root) {overflow: hidden}` in simple

I am facing an issue with displaying my .svg file in my next-js project. It seems that the CSS code svg:not(:root) { overflow: hidden; } is causing the problem. Could someone explain what this particular CSS rule is for? After changing the code to svg:no ...

cssreactjssvg

Navigate to the designated location

Example: function smooth_scroll(){ var target = document.location.hash.replace("#",""); var selector = 'div[id='+target+']'; alert(selector); $('html,body').animate( {scrollTop: $(selector).of ...

javascriptjqueryhtml

Arranging my pictures through CSS styling

Upon examining my webpage, I've noticed that the images are not properly aligned. My goal is to have the icons perfectly lined up; however, it seems there's a discrepancy depending on another cell, based on the size of the container where the tim ...

htmlcss

Blank vertical gap among columns within Bootstrap 4

Here is the current HTML setup: <div class="container"> <div class="row"> <div class="col-lg-9 description"></div> <div class="col-lg-3 sidebar"></div> <div class="col-lg-9 comments"></div& ...

htmlcsstwitter-bootstrapbootstrap-4

Guide to utilizing custom fonts in a VUE application

I'm currently working on my first Vue project and despite following various examples and the official documentation, I am struggling to resolve an issue regarding importing fonts locally in my project. https://i.sstatic.net/mXryH.png Within my `` tag ...

htmlcssvue.jsfontsfont-face

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

css

Execute a Flask function at regular intervals

Within my HTML document, there is a span element that displays the result of the getStatus() function: <span id="sysStatus" style="font-weight: bold;">{{ status }}</span> The logic behind the getStatus() function is as follows: def getStatus ...

pythonhtmlflask

Guide on activating javascript code for form validation using php

How can I activate JavaScript code for form validation? I am currently implementing form validation on a combined login/register form where the login form is initially displayed and the register form becomes visible when a user clicks a button, triggering ...

javascriptphphtmlcss