/    Sign up×
Community /Pin to ProfileBookmark

How do I center a container

I’m trying to center a container using the code shown below. I’ve tried various way in both html and css without success. The related css follows:

“`

<style>
.container {
display: flex;
max-width: 1800px;
margin-right: auto;
margin-left: auto;
padding-top: .3rem;
padding-bottom: 1.5rem;
}

.divL, .divR {
box-sizing: border-box;
padding: 5px;
border: solid 1px #000000;
}

.divL {
background: #eaeaea;
width: 50% ;
}
.divR {
background: #eaeaea;
width: 50% ;
}

.divR h1 {
font-size:24px;
font-weight:bold;
margin-bottom:8px;
border-bottom:solid 1px #000000;
padding-bottom:10px;
text-align: center;
}
.divR h2 {
font-size:18px;
font-weight:bold;
margin-bottom:4px;
padding-bottom:5px;
text-align: center;
}
.divR h4 {
font-size:16px;
font-weight:normal;
margin-bottom:4px;
padding-bottom:5px;
text-align:left;
}
.divL h1 {
font-size:24px;
font-weight:bold;
margin-bottom:8px;
border-bottom:solid 1px #000000;
padding-bottom:10px;
text-align: center;
}
.divL h2 {
font-size:18px;
font-weight:bold;
margin-bottom:4px;
padding-bottom:5px;
text-align: center;
}
.divL h4 {
font-size:16px;
font-weight:normal;
margin-bottom:4px;
padding-bottom:5px;
text-align: left;
}
.p {
font-size:16px;
color:#000000;
font-weight:normal;
margin-bottom:8px;
padding-bottom:10px;
}
.h1 {
font-size:24px;
font-weight:bold;
margin-bottom:4px;
border-bottom:solid 3px #000000;
padding-bottom:5px;
text-align: center;
}

</style>
“`

The html follows:

“`
<div class=”download”>
<br /><br>
<h1><center>FoxClone Download Page</center></h1>
<div class=”container”>
<div class=”divL”>
<h3>Get the “<?php echo “{$filename}”;?>” file (approx. 600MB)</h3>
<center> <a href=”<?php echo “/{$file}”;?>”><img src=”images/button_get-the-app.png” alt=””></a> </center><br />
<h3 style=”margin-bottom: 0.5rem;”>The MD5sum for “<?php echo “{$filename}”;?>” is “<?php echo “{$md5file}”;?> <br />
_______________________________________________________________”</h3>
<h3>Read or Download the Installation and Use Instructions </h3>
<center> <a href=”<?php echo “/{$pdf}”;?>”><img src=”images/button_read-the-file.png” alt=””></a></center><br /><h3>
_______________________________________________________________”</h3>

<h3>How To Install To A USB/CD</h3>
<h4>1. Download the iso file <br />
2.&nbspa. If burning to a USB stick use the USB image writer that comes with your distribution. <br />
&nbsp&nbsp&nbsp b. If burning to a CD, there are many Linux utilities, xfburn is one of the simplest. Install from your software
manager/centre if not installed.</h4>
<br />
<h3>How To Boot The USB/CD</h3>
<h4>At the manufacturer’s splash screen, press the key to get into the boot menu. This key varies across PCs, as an example for a Lenovo
Thinkpad it is F12. Consult your user manual to find out what the key is or google. Do not confuse the boot menu with the boot priority order
settings in BIOS. The boot menu is a one time selection for the device to use to boot the PC. It overrides the normal boot priority order. The next
time you boot, the PC will revert to the normal boot order. Virtually all BIOSs support this feature, they just do it differently. </h4>
</div>

<div class=”divR”>
<h3>Get the “<?php echo “{$debname}”;?>” file (approx. 7MB) </h3>
<center> <a href=”<?php echo “/{$deb}”;?>”><img src=”images/button_download.png” alt=””></a></center><br />

<h3 style=”color:red”><b>WARNING – DO NOT INSTALL THIS TO YOUR COMPUTER !!!</b></h3>
<h4 style=”color:black”>This .deb file is designed to be installed on a large USB drive, typically 1TB or greater, that already has an operating system installed and is intended as a backup drive.</h4>

<h4><b>For more information <a href=’download/deb_file.pdf’ style=’color:#ff0099;’>Click Here</a></b></h4><br><h3>
______________________________________________________</h3>

<h3>Get the “<?php echo “{$srcname}”;?>” Source file (approx. 6MB) </h3>
<center> <a href=”<?php echo “/{$src}”;?>”><img src=”images/button_download.png” alt=””></a></center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
“`

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@jessonhamza456Jun 09.2020 — Container is at the center in my already when I run this
Copy linkTweet thisAlerts:
@christaelrodJun 09.2020 — Try this below code

.container {

width:1170px;

margin-right: auto;

margin-left: auto;

}
Copy linkTweet thisAlerts:
@VITSUSAJun 09.2020 — @larry29936#1619288 Container is already at the center when I run this. You can share the snapshot where you facing the error.
Copy linkTweet thisAlerts:
@larry29936authorJun 09.2020 — Fixed.
Copy linkTweet thisAlerts:
@VITSUSAJun 10.2020 — Great :)
Copy linkTweet thisAlerts:
@100rzJun 10.2020 — hi my name is kishore and i am working in searchie and we have introduced digital visiting cards.formore info visit our site https://thesearchie.com/digital-business-card/
×

Success!

Help @larry29936 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...