Centering pictures with CSS (as opposed to inline)
Solved/Closed
BrianGreen
Posts
1005
Registration date
Saturday January 17, 2015
Status
Moderator
Last seen
September 30, 2021
-
Oct 6, 2015 at 02:15 PM
BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 - Oct 6, 2015 at 04:59 PM
BrianGreen Posts 1005 Registration date Saturday January 17, 2015 Status Moderator Last seen September 30, 2021 - Oct 6, 2015 at 04:59 PM
Related:
- Centering pictures with CSS (as opposed to inline)
- How to auto save pictures in messenger - Guide
- Remove image border css - Guide
- Connection failed after 4 retries css - Guide
- Convert picture to shape powerpoint - Guide
- How to make a video with pictures on windows media player - Guide
2 responses
BrianGreen
Posts
1005
Registration date
Saturday January 17, 2015
Status
Moderator
Last seen
September 30, 2021
149
Oct 6, 2015 at 03:48 PM
Oct 6, 2015 at 03:48 PM
The solution is [edit -] NOT found in the CSS stylesheet. The #picplace line [edit -] DOES NOT need to be the following ...
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)
#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
1005
Registration date
Saturday January 17, 2015
Status
Moderator
Last seen
September 30, 2021
149
Oct 6, 2015 at 04:59 PM
Oct 6, 2015 at 04:59 PM
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:
And the html was
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>
Oct 6, 2015 at 04:22 PM
When I replace all with and then checking with w3.org and I get told that ... ID "picplace" already defined
What am I doing wrong please?