What is the correct way to center-align elements?

I have a basic grid layout that has been styled using CSS.

#videowall-grid{
    width:700px; 
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px;
}

 #videowall-grid .square{
    padding: 5px;
    margin: 5px;
    border: 1px dashed #dddddd;
    width: 70px;
    height: 70px;
    display: inline-block;
    text-align: center;

    <div id="videowall-grid" style="display: block;"><div class="row">
<div id="1_1" class="square">8</div><div id="1_2" class="square">373</div><div id="1_3" class="square">1</div><div id="1_4" class="square">111</div></div><div class="row">
<div id="2_1" class="square">318</div><div id="2_2" class="square">319</div><div id="2_3" class="square">321</div><div id="2_4" class="square">button</div></div><div class="row">
<div id="3_1" class="square">234</div><div id="3_2" class="square">button</div><div id="3_3" class="square">button</div><div id="3_4" class="square">button</div></div></div>

http://jsfiddle.net/nonamez/upHjg/

My question is, how can I ensure that the text is centered inside each square and all squares are centered within their parent div?

htmlcss

Answer №1

To achieve vertical center alignment for text, add display:table, margin:0 auto to the row div, and display:table-cell.

#videowall-grid{
    width:700px; 
    border:1px dotted #dddddd;
    display: none; 
    margin: 0 auto;
    padding: 5px; 
    text-align:center
}
#row{display:table;  
    margin:0 auto
} 
#videowall-grid .square{
    padding: 5px;
    margin: 5px;
    border: 1px dashed #dddddd;
    width: 70px;
    height: 70px;
    display:table-cell;
    text-align: center;
    vertical-align:middle
}​

Check out the LIVE DEMO

Answer №2

To center the content within #videowall-grid, you can apply the style text-align:center;:

#videowall-grid{
    width:700px; 
    border:1px solid #cccccc;
    display: block; 
    margin: 10px auto;
    padding: 10px;
    text-align:center;
}

The text-align property is effective for aligning inline elements. By setting your squares to use inline-block, they will respond to this alignment.

For a demonstration, view this Updated JSFiddle

Just noted: The text is centered inside the squares in your existing JSFiddle example.

Answer №3

To fix the issue, simply include text-align: center; in the CSS for #videowall-grid.

Check out the DEMO here

Answer №4

<div id="videowall-grid" style="display: block;" align="center">

Answer №5

To improve the layout, you can add padding to your elements. Check out the updated code below where I have adjusted the padding for videowall-grid and .square:

<style type="text/css">
#videowall-grid{
    width:550px; 
    border:1px dotted #dddddd;
    display: none; 
    margin: 5px auto;
    padding: 5px 5px 5px 150px;

}

 #videowall-grid .square{
    padding: 30px 5px 5px 5px;
    margin: 5px;
    border: 1px dashed #dddddd;
    width: 70px;
    height: 45px;
    display: inline-block;
    text-align: center;
}
</style>
<div id="videowall-grid" style="display: block;"><div class="row">
<div id="1_1" class="square">8</div><div id="1_2" class="square">373</div><div id="1_3" class="square">1</div><div id="1_4" class="square">111</div></div><div class="row">
<div id="2_1" class="square">318</div><div id="2_2" class="square">319</div><div id="2_3" class="square">321</div><div id="2_4" class="square">button</div></div><div class="row">
<div id="3_1" class="square">234</div><div id="3_2" class="square">button</div><div id="3_3" class="square">button</div><div id="3_4" class="square">button</div></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

Swap the particular term within the href attribute to .data()

Is there a way to dynamically update the CSS file being linked in my website based on radio button selections? Here's an example of what I am trying to achieve: <link id="custom-css" href="mysite/css/color1.css" rel="stylesheet" type="text/css"/&g ...

jqueryhtml

Turn off the ability to click on images, but allow users to access the right

https://i.stack.imgur.com/jriaP.png Example image sourced from reddit.com Illustration represents the desired effect using CSS and possibly JS. In essence: I aim to make an image on a website unclickable to its imageURL There should be a context menu ...

javascriptjqueryhtmlcssimage

Button in Angular gets stuck when a touchscreen is long pressed

In my Angular2 application, I am facing an issue with a button when running on a Windows 10 touchscreen PC in Chrome. Normally, the button works fine and executes the click function. However, if the button is held for 1-2 seconds, it gets stuck and fails t ...

cssangulartypescript

Prevent time slots from being selected based on the current hour using JavaScript

I need to create a function that will disable previous timeslots based on the current hour. For example, if it is 1PM, I want all timeslots before 1PM to be disabled. Here is the HTML code: <div class=" col-sm-4 col-md-4 col-lg-4"> <md ...

javascripthtmlangulartypescript

Creating structured paths for retrieving data via HTTP GET requests

In my Laravel project, I have routes set up for requests in a traditional way: Route::get('edit/{user}', 'AdminUserController@getUser'); Route::post('delete', 'AdminUserController@deleteUser'); However, I am facing ...

javascriptphphtmllaravelget

What might prevent an onSubmit event from triggering the execution of "checkTheForm()"?

Despite consuming a substantial amount of information on the internet, I still find myself puzzled by why my code isn't functioning as expected. I acknowledge that there are numerous tutorials out there guiding me to use <form action="index.html" o ...

javascriptjqueryhtmlformsvalidation

What is the best way to switch between two icons using boot-strap and jQuery without the use of buttons?

Is there a way to make it so that clicking on the heart icon hides it and shows the filled heart icon instead using jQuery? I am struggling to figure out how to reference the other icon in my function. This is just a rough idea of what I want to achieve. ...

htmljquerycssbootstrap-4

How can I make the row color of a jQuery datatable change when the row is selected?

One of my challenges involves implementing a jquery dataTable (view here) where each row contains a checkbox. I want the row's color to change when the checkbox is checked. This is the approach I attempted: <table id="tabellaOrdinaFarmaci" class=" ...

javascriptjqueryhtmlcssdatatable

CSS filter for Internet Explorer

Can this CSS class be made to work in Internet Explorer 11? .inactive { filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28); } I attempted to implement the SVG grayscale filter but it was unsuccessful, causing issu ...

cssinternet-explorer-11grayscalecss-filters

Tips for incorporating a sticky toast notification in the ready state of a CI web application

Can you help me with adding sticky toast notifications to my CodeIgniter site's home page? I've tried a few things but it doesn't seem to be working correctly. <div> <p> <span class="description">To show a success ...

phpjquerycsscodeigniter

Creating a clickable color-changing grid: A step-by-step guide

In a grid of size 12 by 12, each corner will be clickable, selecting a 6x3 cell area starting from the corner. The selected cells will change color upon clicking any of the 4 corners. After selecting one corner, the remaining cells (126 cells) will be che ...

javascripthtmlhtml5-canvas

The JQuery click handler seems to only be functioning on the initial item

I am currently working on a table where I need to create a functionality that can change a value in the database for each row. However, I am facing an issue where the changes I make only affect the specific row in the table and not the rest of the rows. M ...

javascriptphpjqueryhtmlajax

Unwanted slideToggle behavior

I am currently working on creating a navigation menu using jQuery's slideToggle function. However, I have encountered an issue where the dropdown menu keeps sliding up and down quickly when hovering over all of them at once. I would like to modify th ...

jqueryhtmlcssnavbarslidetoggle

It appears that when using Python's Selenium to open Chrome, the HTML page is dynamically inserting an iframe element

Recently, I started delving into the world of selenium and web automation, attempting to develop a program to streamline paper searches on PubMed using chromedriver. My primary goal is to automate the process of clicking the "Sign in" button located in th ...

pythonhtmlseleniumiframeselenium-chromedriver

Explore the versatility of jQuery by utilizing multiple objects in your POST and GET requests to PHP for enhanced

I am trying to send multiple arrays to a PHP page using jQuery and retrieve results, but I am encountering an issue where the array values are not being properly passed to the PHP page. Notice: Undefined index: $name Notice: Undefined index: $type Notice ...

phpjqueryhtmlarrays

struggling to align menu items on both sides of a navbar

I am currently facing an issue with positioning elements in my HTML code. I have a File drop-down that I want to display on the left side, while the rest of the drop-downs should appear on the right side. It seems like my CSS files might be causing some in ...

htmlcssbootstrap-4navbar

How can I correct the code that is running both the if and else statements simultaneously?

In the code snippet below, a comparison is made between a username and password. If both are correct, the user is redirected to another page. However, there seems to be an issue where both the if and else statements are executing. Code: if (isset($_POST[ ...

phphtml

Error: Unable to execute candidate.toLowerCase as a function

Encountering the following errors: `Uncaught TypeError: candidate.toLowerCase is not a function. I am utilizing the AutoComplete API within Material UI, however, when I search in the input field, it leads me to a blank page. https://i.sstatic.net/Yv3ZU.pn ...

javascripthtmlreactjsreact-nativematerial-ui

Is there a way to right-align the labels and input fields simultaneously?

Is there a way to line up the labels and inputs on the right side so they all appear in the same row? .radioContainer{ width: fit-content; margin: 5px; margin-top: 20px; background-color: aqua; padding-bottom: 25px; } <div class=" ...

htmlcss

Is it necessary for the input element to be placed within a form?

One of the components I have in my React project has a specific purpose: allowing the user to input a word, press enter or click a link, and go to that word's definition page. 'use client'; import { FontAwesomeIcon } from '@fortawesome ...

htmlformsnavigationsubmitsemantic-markup