WordPress.org

Ready to get started?Download WordPress

Forums

Image Captions not Aligning Centrally (4 posts)

  1. TehGoatLord
    Member
    Posted 3 years ago #

    I'm using Inspiration WordPress theme.
    I've added the align properties suggested by a few threads and added text-alight: centre to the caption properties in the CSS but to no avail.

    Here's the page:
    http://www.rantages.com/blog/tweenagerfail/

    The Image Captions should align as shown in
    http://www.rantages.com/footyblog

    But instead they are aligning left.

    Here's the style.css

    /*
    Theme Name: Inspiration
    Theme URI: http://www.wordpressthemespark.com
    Version: 1.0
    Description: 2, Right Column Theme
    Author: WordPress Themes Park
    Author URI: http://www.wordpressthemespark.com
    */
    
    /* DO NOT REMOVE THE CREDITS AND FOOTER LINKS */
    
    /* Links */
    
    a:link { text-decoration: none; color: #F97F29; }
    
    a:visited {
    	text-decoration: none;
    	color: #F97615;
    }
    
    a:hover, a:active {
    	color: #666666;
    	text-decoration: underline;
    }
    
    /* Headings */
    
    h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 20px 0 10px; }
    
    h1 { font-size: 32px; margin-bottom: 0px; margin-top: 10px;}
    
    h2 { font-size: 28px; }
    
    h3 { font-size: 24px; }
    
    h4, h5, h6 { font-size: 20px; }
    
    /* Other Html Elements */
    .titles { font-weight: normal; border-bottom-width: 0; font-size: 24px; text-decoration: none;}
    .titles a:link, .titles a:visited, .titles a:active {
    text-decoration: none;
    font-size: 24px;
    font-weight: normal;
    border-bottom-width: 0;
    }
    
    pre, blockquote
    {
    	  border-color:#7A7A7A;
      border-width: 0px;
      border-style: solid;
    
      margin:10px 10px 10px 50px;
      padding:5px 5px 5px 28px;
    
      background-color:#595959;
    
      background-image:url('images/PostQuote.png');
      background-position:left top;
      background-repeat:no-repeat;
            text-shadow: 1px 1px 2px#000;
    
    }
    
    /*pre:hover, blockquote:hover
    {
    	background-color: grey;
    	border: 1px solid #d0d0d0;
    } */
    
    pre { padding-top: 10px; padding-bottom: 10px; }
    
    code { color: #F97F29; font-family: Consolas, Verdana, "Courier New", Sans-Serif; }
    
    ul, ol { line-height: 2.0em; }
    
    ul {
    	list-style-type: none;
    }
    
    abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }
    
    del { text-decoration: line-through; color: #999999; }
    
    ins {
    	text-decoration: none;
    	color: #F97F29;
    }
    
    /* Structure */
    
    body
    {
    	margin: 0;
    	padding: 0;
    	color: #222222;
    	background-repeat: repeat-x;
    	background-color: black;
    /*	background-image: url(images/bg.png); */
    	font: normal 86% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
    }
    
    #wrapper2 {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    }
    #header
    {
    	float: left;
    	width: 100%;
    	padding-bottom: 8px;
    	clear: right;
    	height: 59px;
    	margin-top: 15px;
    	/*background-image: url(images/RantagesFtwlogo2.png; */
    	background-repeat: no-repeat;
    }
    
    #header-bg-image
    {
    	clear: both;
    	float: left;
    	width: 900px;
    	background-image: url(http://www.rantages.com/rantages2.gif);
    	height: 212px;
    	background-repeat: no-repeat;
    }
    
    #wrapper
    {
    	clear: both;
    	float: left;
    	width: 100%;
    	color: #FFFFFF;
    }
    
    #content-wrapper
    {
    	width: 76%;
    	float: left;
    }
    
    #content
    {
    	float: left;
    	padding: 0 0px 10px 20px;
    }
    
    #sidebar-wrapper
    {
    	width: 24%;
    	float: right;
    }
    
    #sidebar
    {
    	float: right;
    	padding: 0px 0px 0px 10px;
    	width: 213px;
    	margin-top: 0px;
    }
    
    #footer
    {
    	clear: both;
    	float: left;
    	width: 900px;
    	text-align: left;
    	padding-left: 20px;
    	background-image: url(images/footer-bg.png);
    	margin-bottom: 0px;
    	color: black;
    	height: 93px;
    	padding-top: 0px;
    	background-repeat: no-repeat;
    }
    
    #footer a:link, #footer a:hover, #footer a:active, #footer a:visited {
    	color: black;
    	font-weight: bold;
    }
    
    #extras
    {
    	float: left;
    	width: 780px;
    	color: #444444;
    	text-align: left;
    	padding: 0 10px 10px;
    	margin: 10px 12px 20px;
    	background-color: #f5f5f5;
    	border-top: 1px solid #e0e0e0;
    	border-bottom: 1px solid #e0e0e0;
    }
    
    /* Header */
    
    #header h1 {
    	padding-left: 26px;
    	width: 100%;
    }
    
    #header h1 a:link, #header a:active {
    	color: #F97F29;
    	font-size: 20px;
    	text-transform: lowercase;
    }
    
    #header h1 a:hover {
    	color: #F97F29;
    	font-size: 20px;
    	text-transform: lowercase;
    }
    
    #header h1 a:active {
    	color: #F97F29;
    	font-size: 20px;
    	text-transform: lowercase;
    }
    
    #header h1 a:visited {
    	color: #F97F29;
    	font-size: 20px;
    	text-transform: lowercase;
    }
    
    /* header-bg-image */
    
    #header-bg-image ul { list-style-type: none; list-style-image: none; float: left; margin-top: 0px; margin-left: 0px; padding-left: 0px;}
    
    #header-bg-image li { float: left; }
    
    #header-bg-image li a:link,
    #header-bg-image li a:visited
    {
    	float: left;
    	color: #F97F29;
    	display: block;
    	padding: 0px 10px;
    	margin-right: 1px;
    	height: 23px;
    	font-size: 13px;
    	margin-top: 0px;
    	background-color: #000000;
    	background-image: url(images/nav-bg.gif);
    	border-left: 1px solid #1E2D2D;
    	border-right: 1px solid #1E2D2D;
    }
    
    #header-bg-image li a:hover,
    #header-bg-image li a:active
    {
    	color: #F97F29;
    	background-repeat: repeat-x;
    	font-size: 13px;
    	margin-top: 0px;
    	background-color: #1B292A;
    	background-image: url(images/nav-bg2.gif);
    	border-left: 1px solid #1E2D2D;
    	border-right: 1px solid #1E2D2D;
    }
    
    #header-bg-image li.active a
    {
    	color: #FFFFFF;
    	background-color: #F97F29;
    }
    
    /* Wrapper */
    
    #wrapper a:link { font-weight: bold; }
    
    #wrapper a:visited { font-weight: bold; }
    
    #wrapper a:hover, #wrapper a:active { }
    
    /* Content */
    
    #content .post-title a { border-bottom-width: 0; }
    
    #content .post p.img { float: left; margin: 0 15px 0 0; }
    
    #content .post p.img img { padding: 8px; border: 1px solid #d0d0d0; background-color: #eeeeee; }
    
    #content .post-footer
    {
    	font-size: 90%;
    	color: #999999;
    	margin-bottom: 5px;
    	padding:5px 5px 35px 15px;
    	background-image: url(images/post-botom.gif);
    	background-repeat: no-repeat;
    }
    
    .post {
    	padding-top: 5px;
    	padding-left: 20px;
    	padding-right: 20px;
    	padding-bottom: 20px;
    	background-image: url(images/post-bgnd.gif);
    	background-repeat: repeat-y;
    }
    .post-wrapper {
    background-image: url(images/post-top.gif);
    background-repeat: no-repeat;
    width: 668px;
    margin-left: -15px;
    margin-top: 17px;
    }
    
    .post-wrapper2 {
    width: 476px;
    padding: 10px;
    margin-left: -15px;
    margin-right: 10px;
    }
    /* Sidebar */
    
    .sideblock
    {
    	padding: 5px 10px;
    	margin-bottom: 0px;
    }
    
    .sideblock ul {
    	background-image: url(images/sidebar-l-bg.gif);
    	background-repeat: no-repeat;
    	width: 200px;
    	margin-left: -25px;
    	padding-left: 33px;
    	padding-top: 10px;
    	padding-bottom: 20px;
    	background-position: bottom;
    	margin-top: 0px;
    			   }
    
    .sideblock h3 {
    	margin-top: 5px;
    	margin-left: -13px;
    	font-size: 14px;
    	display: block;
    	background-image: url('images/sidebar-h-bg.gif');
    	background-repeat: no-repeat;
    	width: 210px;
    	padding-left: 22px;
    	line-height: 40px;
    	margin-bottom: 0px;
    	padding-top:8px;
    	margin-right: 0px;
    	color: #FFFFFF;
    
    }
    
    #sidebar dt {
    	padding-top: 5px;
    	font-weight: bold;
    	color: #F97F29;
    }
    
    #sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }
    
    #sidebar dd a:link { border-bottom-width: 0; font-weight: normal;  border-bottom: none; text-decoration: none;}
    
    #sidebar dd a:visited { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none; }
    
    #sidebar dd a:hover, #sidebar dd a:active { border-bottom: none; text-decoration: none;}
    
    /* Extras */
    
    #extras h6 { font-size: 14px; text-transform: uppercase; color: #FFFFFF; }
    
    #friends
    {
    	float: left;
    	width: 150px;
    	margin-left: 20px;
    	margin-right: 10px;
    }
    
    #links
    {
    	float: left;
    	width: 275px;
    	margin-right: 50px;
    }
    
    #about
    {
    	float: left;
    	width: 250px;
    	margin-right: 20px;
    }
    
    #friends ul { padding-left: 20px; }
    
    #links dl, #links dt, #links dd { margin: 0; padding: 0; }
    
    #links dt { font-weight: bold; padding-top: 5px; }
    
    #links dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999999; }
    
    	/* Comments Styling */
    
    .commentlist{
    	background-color: #747474;
    	padding-top: 10px;
    	padding-bottom: 5px;
    	width:589px;
    	padding-right: 20px;
    	padding-left:40px;
    	background-image: url(images/comments-top.gif);
    	background-repeat: no-repeat;
    }
    
    .commentlist-bottom
    {
    	background-color: #747474;
    	padding-right: 20px;
    	padding-top: 10px;
    	padding-bottom: 5px;
    	width:589px;
    	height:20px;
    	background-image: url(images/comments-bottom.gif);
    	background-repeat: no-repeat;
    
    }
    
    #commentlist li {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #700000;
    }
    
    #commentform {
    	margin: 1em 0;
    	background: #464646;
    	width: 280px;
    
    }
    
    #commentform textarea {
    	background-color: #E4E4E4;
    	border: 1px solid #999999;
    	width: 280px;
    }
    #commentform textarea:hover {
    	background-color: #EFEFEF;
    	border: 1px solid #999999;
    }
    #commentform textarea:focus {
    	background-color: #C0C0C0;
    	border: 1px solid #999999;
    }
    
    #commentform #email, #commentform #author, #commentform #url {
    font-size: 1.1em;
    background: #E4E4E4;
    	border: 1px solid #999999;
    width: 280px;
    }
    #commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
    font-size: 1.1em;
    	background-color: #EFEFEF;
    	border: 1px solid #999999;
    width: 280px;
    }
    #commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
    	font-size: 1.1em;
    	background-color: #C0C0C0;
    	border: 1px solid #999999;
    	width: 280px;
    }
    #commentform input{
    margin-bottom: 3px;
    }
    
    .date {
    	height: 54px;
    	margin-bottom: 5px;
    	width: 54px;
    	text-align: center;
    	float: left;
    	margin-top: 10px;
    	margin-left: 20px;
    
    }
    .date .month {
    	display: block;
    	color: #FFFFFF;
    	padding: 2px 0px;
    	text-align: center;
    	text-transform: uppercase;
    	font-size: 10px;
    	font-weight: bold;
    }
    .date .day {
    	display: block;
    	color: #FFFFFF;
    	font: 2.3em Georgia;
    	padding-top: 0px;
    	text-align: center;
    	margin-top: -5px;
    }
    
    #left {
    	width: 60px;
    	float: left;
    }
    
    .slogan {
    	font-size: 13px;
    	color: #FFFFFF;
    	text-transform: lowercase;
    	margin-left: 26px;
    	margin-bottom: 2px;
    	float: left;
    }
    .icons {
    float: right;
    margin-right: 30px;
    margin-top: -20px;
    }
    
    #header ul {
    	list-style-type: none;
    	list-style-image: none;
    	float: right;
    	margin-top: -13px;
    	margin-left: 0px;
    	padding-left: 0px;
    	margin-right: 15px;
    
    }
    
    #header li { float: left; }
    
    #header li a:link,
    #header li a:visited
    {
    	float: left;
    	color: #FFFFFF;
    	display: block;
    	padding: 0px 10px;
    	margin-right: 1px;
    	height: 23px;
    	font-size: 13px;
    	margin-top: 0px;
    	font-weight: bold;
    }
    
    #header li a:hover,
    #header li a:active
    {
    	color: #F97F29;
    	font-size: 13px;
    	margin-top: 0px;
    	text-decoration: underline;
    }
    
    #header li.active a
    {
    	color: #FFFFFF;
    	background-color: #000000;
    }
    
    .sideblock a{
    	text-decoration: none;
    	color: #666666;
    }
    
    .sideblock a:hover{
    	text-decoration: underline;
    	color:#F97F29;
    }
    
    .post-footer a{
    	color: #f97616;
    }
    
    .post-footer a:hover {
    	text-decoration: underline;
    	color:#F97F29;
    }
    
    #wrapper p {
    	text-align: justify;
    }
    
    #searchform {
    	padding-top: 8px;
    	padding-bottom: 8px;
    }
    
    #s {
    	margin-bottom: 4px;
    }
    
    input {
    	background-color: #DBDBDB;
    }
    
    input:hover {
    	background-color: #BABABA;
    }
    
    input:focus {
    	background-color: #CECECE;
    }
    
    .wp-caption
    {
      border: 1px solid #ddd;
      text-align: center;
      background-color: #f3f3f3;
      padding-top: 4px;
      margin: 10px;
    }
    
    .wp-caption img
    {
      margin: 0;
      padding: 0;
      border: 0 none;
    }
    
    .wp-caption p.wp-caption-text
    {
      font-size: 14px;
      line-height: 17px;
      padding: 0 4px 5px;
      margin: 0;
    color: black;
    font-weight: bold;
    text-shadow: 1px 1px 2px#000;
    font: "Comic Sans MS";
    }
    img.centered, .aligncenter, div.aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    text-alight: center;
    	}
    
    img.alignright {
    	padding: 4px;
    	margin: 0 0 2px 7px;
    	display: inline;
    	}
    
    img.alignleft {
    	padding: 4px;
    	margin: 0 7px 2px 0;
    	display: inline;
    	}
    
    .alignright {
    	float: right;
    	}
    
    .alignleft {
    	float: left;
    	}
  2. Michelle Langston
    Theme Wrangler at Automattic
    Posted 3 years ago #

    You have the following rule:

    #wrapper p {
        text-align: justify;
    }

    This is causing the captions to align to the left. Remove that rule and it should work. Justified text is not recommended for the web anyway because it's not as readable as left-aligned text (or right-aligned, if your language is RTL).

    If you use the Firefox browser, I highly recommend installing the Firebug plugin as it can really help you diagnose and fix problems like this! http://www.getfirebug.com

  3. Khang Minh
    Member
    Posted 3 years ago #

    Instead of removing it, you might try adding this to your css:

    #wrapper .wp-caption p.wp-caption-text {
    text-align: center;
    }

  4. TehGoatLord
    Member
    Posted 3 years ago #

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic