An alternative to HTML <center> tag in the realm of CSS

I've been working on centering multiple elements for a while now. I was thrilled when I discovered the <center> element, as it worked perfectly for my needs. However, I soon learned that it is deprecated in HTML5. Despite many suggestions to use CSS for text alignment, I need to center more than just text.

 <div class="col-lg-1 col-mid-2 col-sm-3 col-xs-4">
   <center>
     <button type="button" class="btn btn-primary circle" data-toggle="button" aria-pressed="false" autocomplete="off">
       <img src="assets/img/img.png">
     </button>
     <p>Some Text</p>
   </center>
 </div>

Despite recommendations to use:

 margin:0px auto;

This doesn't achieve the same result as the <center> element does.

csshtml

Answer №1

To center align content, apply the CSS property text-align:center;. However, all child elements must also have either display: inline or display:inline-block.

For instance, in your situation:

.col-lg-1 { text-align:center; }
p, button { display:inline-block; }

Answer №2

For a neat display, you may position the main container in the center by setting its margins to auto and using text-align:center for inline elements.

div{
    margin:auto;
    text-align:center;
}

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

Utilize the class names to assign a distinctive color using mixins in SCSS

I am diving into the world of Sass and I have a peculiar challenge. I want to create a class that allows me to set a color using percentages for red, green, and blue values. For example, the class name color-50-10-60 would represent 50% red, 10% green, a ...

htmlsassscss-mixins

Persistent Footer - Attemping to keep footer anchored to the bottom of the page

Today, I am facing a sticky footer issue that is rather frustrating for me. Despite trying various resources and conducting thorough searches, I am unable to identify what is causing the problem with my footer. I would greatly appreciate any help in resolv ...

htmlcss

I am experiencing difficulties when attempting to insert an email link using Codeigniter 3's framework-specific syntax. The function does not

In my Codeignieter 3 project, I am faced with the task of displaying email addresses stored in the database. When using the code <a href="mailto:<?php echo $record->email; ?>"><?php echo $record->email; ?></a></td>, I e ...

phphtmlcodeigniteremail

The DIV container refuses to line up properly

Despite my best efforts, I have not been able to align these 4 boxes properly after going through documentation, tutorials, and examples. div#frontpage{width:100%; } div#1{width:25%; float:left; position:relative;} div#2{width:25%; float:left; position:re ...

csshtmlcss-float

What is the best method for reducing the length of the user input in a JQuery auto-complete box?

Is there a method to eliminate leading and trailing spaces from the user's input in a jQuery auto-suggesting text <input> box before comparing it to a list of names and values? In my current setup, users are expected to enter names into a textbo ...

phpjavascriptjqueryhtmljquery-autocomplete

Issue accessing PDF element within iFrame

I'm attempting to search for specific words within a PDF using a textbox on a webpage. I've embedded the PDF within an iframe, but unfortunately it's not functioning as expected. This code works fine with regular text, but when searching for ...

javascriptphpjqueryhtmliframe

Issue with Javascript object arises when 'i' is altered

I have developed a program to highlight all words on a page that are searched for. It works well when implemented as follows: var high = "<span class='highlighted'>hello</span>"; document.getElementById("inputText").innerHTML = input ...

javascriptjqueryhtml

Unordered List Causes Sticky Footer to Break

I am currently working on creating a responsive template, but I have encountered an issue with an unordered list causing my sticky footer to break. Interestingly, when I remove the list items and keep the ul element, the footer remains sticky. However, in ...

htmlcssfooter

How can I keep a Fixed Positioned Background from Moving to the Top of the Page when Clicked?

I've created a unique image/lightbox viewer for displaying multiple images on a single page. However, there seems to be an issue with the .no-scroll class jumping to the top of the page every time it is triggered by a .click() event. I suspect this mi ...

javascriptjqueryhtmlcssposition

How can I decrease the spacing between text within a button using Bootstrap?

Here is the code I am working with: <button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled> <h5 style="color:#000000"><i><b>1,39€</b></i></h5& ...

htmlbootstrap-4

Determine the value of a checkbox as 0 if unchecked and 1 if checked

How can I retrieve a value of 1 when a checkbox is checked and 0 when it is unchecked? <input type="checkbox" name="data[color][]" class="color" value="1" checked> The data array stores information from in ...

phphtml

Techniques for transferring images directly into HTML canvas games

I created a thrilling race car game and here is the code snippet: index.html <!DOCTYPE html> <html> <head> <title> Extreme Race Car Game </title> <link rel="stylesheet" type="text/css" href="style.css"> < ...

javascriptjqueryhtmlcsshtml5-canvas

Categorize an array by their names using Jquery and present them as a list

I have a list of cities and their corresponding countries structured like the following: { "data": [ { "cityname": "Newyork", "countryname": "USA" }, { "cityname": "amsterdam", "countryname": "Netherland" },{ "cityname": "Washington", "country ...

javascriptjqueryhtmlarraysgrouping

The sticky and flexible footers and headers CSS feature is functioning perfectly in WebKit, though it seems to be having difficulties in

I'm working on constructing a layout that features a header and footer with flexible heights, while the middle section takes up the remaining space. If there is overflow in the middle section, a scroll bar should appear specifically for that section. ...

htmlcssfirefoxcss-tables

Issue with locating image source in Angular 4

I'm struggling to source an image using angular 4. It keeps giving me an error message saying that the image cannot be found. Here is my folder structure: app_folder/ app_component/ - my_componenet - image_folder/ - myimage I am trying to ...

htmlimageangularsrc

Learn how to automatically retrieve messages without refreshing the page by leveraging the power of AJAX

displaying notifications with:- $call = "SELECT * FROM `chat` WHERE fromthe = '$email' and tothe='theadmin' UNION ALL SELECT * FROM `chat` WHERE fromthe = 'theadmin' and tothe='$email' order by id desc"; mysqli_quer ...

javascriptphphtmlajaxmysqli

HTML double for-loop

While working on my website's HTML file, I encountered a challenge with nested for-loops. The first loop successfully checks the user's account and displays the corresponding data, and the second loop filters data starting with "Title:" and displ ...

pythonhtmldjangofor-loopnested

The alignment of the text seem to be malfunctioning

The text-align:center property isn't working as expected. Can someone please assist me in figuring out why it's not functioning correctly? Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <title>Wheat and ...

htmlcss

Issues with Safari Browser concerning the validation of input types min and max in HTML

Has anyone else experienced issues with form validation in Safari Browser (MAC OS and Version 7.0.4 (9537.76.4)) when using input type="number"? I tried visiting http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_max_min and found that the ...

htmlvalidationnumbersmaxmin

An issue occurred while trying to establish the referrer policy

I encountered an error in my Chrome console while working on a WordPress site. The following error message showed up: "Failed to set referrer policy: The value 'http://example.com/comic/' is not one of 'always', 'default' ...

javascripthtmlwordpressmetareferrer-policy