I would like to align the borders of all <div class="rectangle"> tags to the center

 _______________________________________________
|                                               |
|    Picture                                    |
|                                               |
|_______________________________________________|

I am trying to position the above rectangle in the center of a page. I have created it using a div tag and the following code:

.rectangle
{
     width: 73.3%;
     margin:0 50 0 0;         
     border-top:1px solid #46464f;
     border-bottom:1px solid #282832;
     border-left:1px solid #282832;
     border-right:1px solid #282832;
     border-bottom-width:medium;
     border-left-width:medium;
     border-right-width:medium;
     border-top-width:medium;
}

When I use 

<div class="rectangle" align="center">
, it does not center the rectangle as expected.

htmlcss

Answer №1

Give this CSS snippet a try:

.rectangle
{
    width: 73.3%; 
    margin: 0 50px 0 0; 
    border-top: 1px solid #46464f; 
    border-bottom: 1px solid #282832; 
    border-left: 1px solid #282832; 
    border-right: 1px solid #282832; 
    border-bottom-width: medium; 
    border-left-width: medium; 
    border-right-width: medium; 
    border-top-width: medium;   
    text-align: center;
}

Answer №2

HTML:

<div class="setCenter">Content within a div element</div>

CSS:

body {
    width: 100%;
    height: 100%;
    margin:auto;
}

.setCenter {
    margin:auto;
    width:90%;
    height:auto;
    border:1px solid #000;
    color:Green;
}

Check out the DEMO

Answer №3

Give this a try:

Here is the HTML code:

<div align="center">
     <img src="http://fin6.com/wp-content/uploads/2013/07/fb81531cc9cf1512dce7f0e5f36e40fe.jpg" alt="nature"/>
</div>

And here is the CSS code:

div{
     width: 300px;
     background:red;
     margin:0 auto;
}

img{
     width:150px;
     margin:0 auto;
}

You can view a live DEMO here

UPDATE:

For your updated question, remember to use margin:0 auto; to center the div.

.rectangle
{
     width: 73.3%;
     margin:0 auto;
     border-top:1px solid #46464f;
     border-bottom:1px solid #282832;
     border-left:1px solid #282832;
     border-right:1px solid #282832;
     border-bottom-width:medium;
     border-left-width:medium;
     border-right-width:medium;
     border-top-width:medium;
}

Updated DEMO here

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

Personalized sorting to match the unique rendering of cells in Material UI Data Grid

I have integrated the Material UI V4 Data Grid component into my React Js application. The Data Grid component requires two props: rows (list type) and columns (list type). Below is a sample row item: const rows = [ { id: 1, customerName: " ...

javascriptcssreactjsmaterial-ui

Learning how to manipulate images by rotating, resizing, and zooming from the corners on a canvas

Currently I am in the process of creating a collage application and I'm hoping to incorporate a specific visual effect into my images. Click here for an example. My goal is to be able to rotate and resize the image from a specific point when clickin ...

javascriptjqueryhtmlcanvas

Ways to determine if a link exists on a page using Jquery

One element on my website is a link: <a href="https://mywebsite.com/terms-conditions-mywebsite" target="_blank">Terms and conditions</a> I'm looking to use Jquery to verify if this particular link appears on the webpage. While I have exp ...

javascriptjqueryhtml

tips on displaying information in a vertical tab orientation

I'm struggling to figure out how to loop inside the <TabPanel> in order to render data using React vertical tabs. I've provided the code I've tried and the data coming from an API. Check out the codesandbox at https://codesandbox.io/s/ ...

javascripthtmlcssreactjstabs

Implementing Ajax to display autocomplete suggestions in an HTML table

I've been working on implementing an ajax auto complete function into my HTML code. My goal is to display the results from the auto complete function in a table on the html page. Although the auto complete function is working and I can see the drop do ...

htmlajax

Ensure the div has the necessary validator added

Is it feasible to apply a "required" validator to a "div"? I have a scenario where I want to validate if a specific div is filled when the form is submitted. If not, I need to show a message saying "Contact is required". div *ngIf="contacts.length > 0" ...

htmlangulartypescriptvalidationrequiredfieldvalidator

Issue arises when CSS selectors do not function properly with absolutely positioned divs

I am experiencing an issue with my CSS code that is functional on CodePen but not on my actual website. I am attempting to target the .appraisals class for manipulating the background color of an opaque screen slider containing information. Despite using a ...

htmlcss

What steps should I take to ensure that elements beneath a div are made visible?

I've been working on a unique project to create a website with "hidden text" elements. One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Jav ...

javascripthtmljquerycss

Line of cubes - tap on a single cube and the others gracefully slide away from view

I am working on a project where I need to create a row of blocks. The goal is for the blocks to slide off the screen when one is clicked, leaving the clicked block in the first position. For instance: https://i.sstatic.net/IB5LI.jpg I attempted using jQ ...

javascriptjquerycssjquery-uislide

avoid inserting into a specific field with a specific name

I am trying to add a picture next to a specific name, but I am facing issues as there is no option for inserting it. This is how my table looks: https://i.sstatic.net/RRaTb.png How can I insert a picture in front of a particular name? The content of my ...

javascriptphphtmlcssajax

How to hide or remove an element in jQuery depending on an attribute change

I am currently working on my website and exploring ways to utilize jQuery to display or add the element div#content1 when the #nav-home-tab has aria-selected=true, and to hide or remove the element if aria-selected=false. This is what I have tried so far: ...

jqueryhtmlbootstrap-4

PHP Ajax Image Uploading and Storage

Is there a way to effortlessly upload an image and save it in the uploads folder without any page refresh? Not only that, but can we also have the uploaded image displayed on the screen within a designated div section? Unfortunately, I seem to encounter a ...

javascriptphphtmlajaxupload

Responsive width is applied to the first div, while a fixed width is set for the second div in

Is there a way to create this specific layout using CSS? It seems like a simple design, but I'm struggling with the coding. The red div will display an image advertisement and will always be 350px wide, positioned on the right side of the page. The gr ...

htmlcss

Is there a more efficient method for replacing all attributes on cloned elements?

While this code does the job, I can't help but feel like it's a bit outdated. I'm not very experienced with JS/JQuery and only use them when necessary. My approach involves cloning an element and then replacing all of its attributes with on ...

javascriptjqueryhtml

Retrieve a portion of a webpage from a separate file

Is there a way to load part of a page from another HTML/PHP file? Here's my current situation: I have a PHP file that contains: $dirname = dirname(__FILE__); //Path to your *.php file $file = $dirname."/enmainheader.php"; $contents = file($file); ...

phphtml

The linear transition property in CSS is not being followed as expected

I'm trying to create a smooth linear transition on the height of a box with CSS, but it's not working as expected. Currently, the transition is abrupt - the height suddenly increases and then the margins take up all the time. Can someone provide ...

htmlcsscss-transitions

Remove a data entry from the MySQL database by selecting the corresponding row in the table and utilizing the DELETE function

Is there a way to remove a record from my MySQL database by clicking on a row in a table that is generated using ejs? Below is the code I am currently using to generate the table rows. <% res.forEach(function(item){ %> <tr> ...

javascripthtmlmysqlnode.jsejs

Adapting content based on various media queries

After spending more time on this question, I hope to clarify my thoughts better this time around. I am currently designing a responsive layout for my upcoming landing page. The main header in the body changes based on the browser size and device. <h1& ...

htmlcssmedia-queries

What is the method in svg.js for accessing the child nodes of an element?

Trying to work with an existing DOM SVG element in my HTML, I utilize the following code svgEle = SVG.adopt(svgDocument.getElementById('svg')); Is there a way to access child elements of svgEle without individually adopting them? elementById ...

javascripthtmlsvgsvg.js

Is it possible to create a masonry-style layout with two columns that is responsive without

Is there a way to organize multiple divs of varying heights into two columns that display immediately one after the other, without relying on JavaScript or libraries like packery or masonry? I've experimented with using display: inline-block in this ...

htmlcssflexbox