CODEWITHSUNDEEP
htmlcssmarkdown
unaiherran
unaiherran

Reputation: 1034

Styling articles in markdown (HTML & CSS)

I'm trying to style a text generated from a plain text that then is tranformed to HTML by markdown

The idea is to get a paragraph, then a centered photo (with the alt text as footnote) and then the next paragraph.

The HTML I get from my page looks like this:

<article class="news_item">
<header><a href="#">Hola</a><span><time datetime="2013-01-24" pubdate>24-01-2013</time></span></header>
<p>Lorem ipsum dolor pscing elitr, sed diam nonumy eirmod </p>
<p><img alt="Alt text" src="bla/bla/bla.png"/></p>
<p>labore et dolore magna aliquyam erat, </p>

</article>

and the styling is:

.news_item {
    clear: left;
    text-align: justify;
    max-width:600px;
}

.news_item header{
    font-size: 16px;
    font-weight: bold;
}

.news_item time{
    font-size: 12px;
    position:relative;
    float: right;
}


.news_item img {
    max-width: 390px;
    float: center;
    position: relative;
    clear: both;
    margin-left:auto;
    margin-right:auto;
    }

.news_item p img {
    max-width: 390px;
    padding: 5px;
    float: center;
    position: relative;
    clear: both;
    margin-left:auto;
    margin-right:auto;
    }

.news_item p {
    width: 600px;
    text-align: justify;
    }

It doesn't matter what I do, the image is never centered in the article. I guess it has something to do with the markdown, that place a <p></p> around the image, but I do not know how to handle this.

Anyone can help me?

Upvotes: 1

Views: 829

Answers (1)

Asad Saeeduddin
Asad Saeeduddin

Reputation: 46628

Style the image using:

display:block;
margin-left:auto;

center is an invalid float value.

Here is a demonstration: http://jsfiddle.net/JxBLq/

Upvotes: 1

Related Questions