Place the content at the center of the div box

I'm currently working on designing a "tile" that appears as a perfect square block with the content centered precisely in the middle.

Below is the HTML code:

<div class="tile-facebook">
    <h5>Facebook</h5>
    <div class="tile-notification">4</div>
    <h4>notifications</h4>
  </div>

Here are the CSS styles applied:

.tile-facebook{
  width:175px;
  height:175px;
  background: #3b5998 ;
  text-align: center;
  border-radius: 10px;
  border-style: solid;
  border-color: #ccc;
  border-width:1px;
  color: white;
}

.tile-notification{
  font-size:80px;
  font-weight:bold;
  padding:10px 0px;
}

Although I have managed to center the text within the block, I am striving for it to be perfectly aligned in the center with equal padding from the top and bottom. Any suggestions on achieving this?

htmlcss

Answer №1

To create a square shape, you can use vertical padding at 100% along with inline-block to ensure proper alignment of content within the square.

One way to achieve this is by adding a pseudo or extra element within your box that draws the square regardless of the width set for the box.

<div class="tile-facebook">
    <div class="wrapper">
        <h5>
            Facebook
        </h5>
        <div class=" tile-notification ">
            4
        </div>
         <h4>
             notifications
        </h4>
    </div>
</div>

.tile-facebook {
    width:175px;
    background: #3b5998;
    text-align: center;
    border-radius: 10px;
    border-style: solid;
    border-color: #ccc;
    border-width:1px;
    color: white;
}
.tile-notification {
    font-size:80px;
    font-weight:bold;
}
.tile-facebook .wrapper * {
    margin:0;
}
.tile-facebook:before {
    padding-top:100%;
    content:'';
}
.tile-facebook:before,
.wrapper {
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/cnq82/

To learn more about using vertical % padding or margin, check out these resources: http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top

By giving a vertical padding of 100%, the height of the element will match the width of its parent.

For different height dimensions, you can adjust the padding values accordingly, such as padding:100% 0 20px 0 ; or padding:20px 0 100% 0;

To create a box with a specific aspect ratio like 4:3, utilize padding-top:75%; or padding:50% 0 25% 0;.

Pseudo or extra elements can assist in aligning content vertically within the square shape without requiring a fixed width in the parent's CSS.

Answer №2

To implement this solution, it is essential that the height of the content remains constant, and you will also need to introduce an additional <div>.

<div class="social-media-tile">
  <div class="middle">
    <h5>Social Media</h5>
    <div class="notification-count">7</div>
    <h4>new notifications</h4>
  </div>
</div>

Furthermore, include the following CSS:

.social-media-tile {
    position: relative;    
}

.middle {
    position: absolute;
    top: 50%;
    margin-top: -[half height];
    left:0;
    width: 100%;
}

In the code snippet provided, replace [half height] with half the height value of the .middle div.

Answer №3

Include margin: -30px; in your CSS stylesheet below:

.notification-tile {
    font-size:80px;
    font-weight: bold;
    padding: 10px 0px;
    margin: -30px;
}

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

The CSS file is being prevented from loading due to a MIME type mismatch error with the header X-Content-Type-Options set to

As I work on developing my Angular 4 app, I have been exploring ways to apply global styles. Following a helpful tutorial on the Angular site, I created a "styles.css" file in the root directory of my application and linked it in the index.html file: < ...

cssnode.jsangularexpressmime-types

Is it better to return JSON before streaming a file through an iframe or sending HTTP headers?

I have created a form that utilizes a hidden iframe to submit a file to a script which then modifies the file and returns the altered version. I have realized that I can avoid saving the file anywhere by simply using echo file_get_contents(tmp);, where tmp ...

phpjavascripthtmlhttp

Centering text using CSS Bootstrap

Hey everyone, I've been attempting to center my text using Bootstrap, but for some reason it's not working. Can someone help me figure out what's going on? <footer class="row p-1 mt-3 bg-primary text-white"> <p class= ...

htmlcssbootstrap-4

Choosing the Following Date from the Datepicker using Selenium IDE

I need the selenium IDE test case to automatically select a date following the steps outlined below: Start by clicking on the departure date to open the datepicker Loop through the dates starting with the currently selected day until the next available d ...

javascripthtmlseleniumautomationautomated-tests

"Step-by-Step Guide to Dividing and Centering Text Sections with Dynamic

Initially, my intention is to implement the concept outlined below. The webpage has dual potential states. In the first scenario, two texts (with potentially varying lengths) are centralized together as a header. When transitioning to the second state, the ...

htmlcssvue.jscss-positioncss-transforms

Remove all objects from a model based on a specific value by implementing a button in Django

For reference, please take a look at the table screenshot: https://i.sstatic.net/evBSK.png I am attempting to remove a row from the table using the corresponding Delete Asset button (meaning deleting all rows in a django model with Symbol: 1INCHUP) The s ...

pythonhtmldjangodjango-viewsdjango-templates

Character count in textarea does not work properly when the page is first loaded

As English is not my first language, I apologize in advance for any grammar mistakes. I have implemented a JavaScript function to count the characters in a textarea. The code works perfectly - it displays the character limit reducing as you type. However, ...

javascripteventstextareahtml

Avoid utilizing PHP with CSS @import as it may not function as intended

Currently, I am experimenting with using HTML/CSS to import PHP files as stylesheets in order to have dynamic stylesheet editing. Although I am new to @import, I need it for switching stylesheets based on the display width of the user's device. Can an ...

phphtmlcss

Sticky position problem in the navigation bar

window.onscroll= function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { ...

javascripthtmlcss

Hover over the image to reveal sliding text

I am attempting to incorporate a CSS3 hover effect into my images, where hovering over an image will cause some text to slide up on a white background. However, I have encountered issues with conflicting code, as I also have overlay text and a 'new&ap ...

htmlcss

Migrating from PHP/MySQL to PDO: A Smooth Transition

I am a beginner in PHP/MySQL and I have some queries. I was watching a YouTube tutorial on creating a basic dynamic website that retrieves data from a MySQL database and displays it on a single PHP index page. I followed the tutorial up to the point wher ...

phpmysqlcsspdocontent-management-system

Material-UI LeftNav with a sticky header

I attempted to create a fixed header, specifically a Toolbar, inside a LeftNav so that when the LeftNav is scrolled, the Toolbar remains in place. However, for some reason, setting position: 'fixed' on the Toolbar does not work within the LeftNav ...

cssmaterial-ui

Taking out the z-index from the transition code

Is there a way to restructure the code without needing to use z-index for the transition? Without z-index: https://jsfiddle.net/Legcb42d/ .container1 { position: relative; width: 100%; height: 100%; } .container1.slide { height: auto; min-heigh ...

javascripthtmlcsscss-transitionsz-index

Is Bootstrap CSS Carousel malfunctioning following a float adjustment?

Currently, I am trying to implement a carousel in bootstrap, but I am facing two significant issues. The alignment of the carousel is vertical instead of horizontal (my div elements are stacking downwards). When I apply the float: left property, the carou ...

htmlcssbootstrap-4

Ensure that text remains centered within a resizable div without wrapping

My website features a sidebar menu that is resizable and has a collapse animation transition. Some of the text in this sidebar needs to be centered, but I've run into an issue - when using text-align: center; to format the text, it shifts around as yo ...

htmlcss

Incorporate an additional ring around the outer edge of the donut pie chart

I have been attempting to create a donut pie chart similar to the one shown below. The main challenge I am facing is with the outer strip. How can I achieve this effect? Your guidance in the right direction would be greatly appreciated. https://i.sstati ...

jqueryhtmlcssflotpie-chart

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

javascriptjqueryhtml

CSS - Ensuring that the height of one div extends all the way down to meet another div

I'm facing an issue with two divs in my design. One of them contains a checkbox and the other has text which can vary in size - sometimes it's small, sometimes it's large. When the text in the second div is big, the box on the left extends a ...

htmlcss

What is the process for including a static file on an http server?

Looking to create a chatroom using node.js. Utilizing the socket.io template for this project. var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var fs = require(&ap ...

javascripthtmlnode.jsexpress

Checkbox offering a tri-state option

Seeking help on creating a checkbox with three states. I have implemented a method to toggle between these states upon clicking. However, the issue is that this method is only triggered after the HTML changes. As a result, the checkbox's navigation be ...

htmlangulartypescriptangular2-forms