Centering pictures with CSS (as opposed to inline) [Solved/Closed]

Posts
982
Registration date
Saturday January 17, 2015
Status
Contributor
Last seen
November 27, 2018
- - Latest reply: BrianGreen
Posts
982
Registration date
Saturday January 17, 2015
Status
Contributor
Last seen
November 27, 2018
- Oct 6, 2015 at 04:59 PM
Hi guys,

I wonder if you could give ma a hand with some coding I am trying to improve on for my website?

Below is (an extract) of my CSS stylesheet. It shows a "toolbar" on the right hand side of the screen and inside the toolbar are some links to other parts of the site.

Here's the CSS code:

/* Right sidebar (Services)*/

#rightborder {width:197px; margin:0 4px 0 0; background:#00FFFF; float:right; color:#666; border-radius:20px;}

#extras {padding:10px 10px;}
#extras h2,
#extras h3 {margin:0px 0 12px 0; color:#606060; font-size:1.6em; font-weight:400; letter-spacing:-1px; text-align:left;}
#extras p {line-height:1.4em; margin: 0 0 15px 0; color:#000000; border-bottom:2px solid #ffffAA;}
#picplace {width:177px; margin-left:auto; margin-right:auto;}


And now the associated htlm ...


<div id="extras">

<h2><a href="backup.php">Data Backup</a></h2>
<div id="picplace"><a href="backup.php"><img src="img/Backup.jpg" alt="Backup" width="91" height="74" /></a></div>
<p>Remove the worry of losing data - even if your computer fails. Data backup or even whole system backup offer a painless way to recover from data loss. <a href="backup.php">Data Backup</a></p>

<h2><a href="dataloss.php">Data Recovery And Data Transfer</a></h2>
<div align="center"><a href="dataloss.php"><img src="img/Data.png" alt="Data" width="91" height="74" /></a></div>
<p>In many cases we can recover data from your drives, even if it has been deleted, or your computer will not boot. <a href="dataloss.php">Lost Data</a></p>

</div>


As you will see in the html, I have tried to make the picture and associated link for "backup.php" in the center of the toolbar. It happens for the "dataloss.php", but I understand that it is bad practice to have the [align=center] in the main html and it is better in the CSS stylesheet.

What am I doing wrong please? Any help would be very much appreciated.
See more 

2 replies

Posts
982
Registration date
Saturday January 17, 2015
Status
Contributor
Last seen
November 27, 2018
0
Thank you
The solution is [edit -] NOT found in the CSS stylesheet. The #picplace line [edit -] DOES NOT need to be the following ...

#picplace {width:50%; margin: auto;}


Apparently it works if the div within the div (as this one is) has a width less than the parent div. The margin:auto forces both left and right margins to be the same.

I forgot to mention that Im using XHTML 1.0 Transitional.

Hope it helps someone else.

I really appreciate thank you messages as a payment for solving issues :o)
BrianGreen
Posts
982
Registration date
Saturday January 17, 2015
Status
Contributor
Last seen
November 27, 2018
-
Oh dear - not solved at all ...

When I replace all
<div align="center">
with
<div id="picplace">
and then checking with w3.org and I get told that ... ID "picplace" already defined

What am I doing wrong please?
Posts
982
Registration date
Saturday January 17, 2015
Status
Contributor
Last seen
November 27, 2018
0
Thank you
At last - all sorted ...

I needed to use a "class" instead of "id". To use the class selector in CSS I replaced the "#" with "."

The final code was ... CSS:
/* Right sidebar (Services)*/

#rightborder {width:197px; margin:0 4px 0 0; background:#00FFFF; float:right; color:#666; border-radius:20px;}

#extras {padding:10px 10px;}
#extras h2,
#extras h3 {margin:0px 0 12px 0; color:#606060; font-size:1.6em; font-weight:400; letter-spacing:-1px; text-align:left;}
#extras p {line-height:1.4em; margin: 0 0 15px 0; color:#000000; border-bottom:2px solid #ffffAA;}
.picplace {width:177px; margin-left:auto; margin-right:auto;}


And the html was

<div id="extras">

<h2><a href="backup.php">Data Backup</a></h2>
<div class="picplace"><a href="backup.php"><img src="img/Backup.jpg" alt="Backup" width="91" height="74" /></a></div>
<p>Remove the worry of losing data - even if your computer fails. Data backup or even whole system backup offer a painless way to recover from data loss. <a href="backup.php">Data Backup</a></p>

<h2><a href="dataloss.php">Data Recovery And Data Transfer</a></h2>
<div class="picplace"><a href="dataloss.php"><img src="img/Data.png" alt="Data" width="91" height="74" /></a></div>
<p>In many cases we can recover data from your drives, even if it has been deleted, or your computer will not boot. <a href="dataloss.php">Lost Data</a></p>

</div>