Center multiple images horizontally in CSS - css

Question

I know this question is very popular, but I couldn't find any elegant answer.
I need to align horizontally 2 images and center them. I've already read about inline-block and I pretty good at margins (margin 0 auto trick), paddings and other geometrics. The thing is... that my html code is parsed from markdown by javascript parser (not mine and complex) and each element enclosed into <p> tag. But my text-align for <p> tag is justified.
I understand that answer on my question is to use <div> right in markdown around images and set its text-align to center, but I seek for more elegant way to do it because I prefer clean and modern coding with html5 semantics and look into the future where <div> elements would be no more.
Basically, my question is simple: is it possible at all to do such a thing without outside block?
UPD: jsfiddle - http://jsfiddle.net/8274L7wc/
It'd be perfect if I could change style of <p> based on child element <img>, but as far as I know - this is impossible by css.
Also I suppose I could use CSS calc() method to calculate width and set precise margins, but I think even div would be better than this.
I can't use text-align:center on <p> element because it would make everything centered, not only images.
UPD2:
I've made quick temporary solution by using jquery .parents method to set all <p> which contain <img> tag - centered:
$('img').parents('p').css('text-align', 'center');

Answer 1

Here are a couple of answers that you might find useful.
FIRST
There is a general rule in web development that says you should always try to use basic browsers' functions before relying on CSS. This is part of what we call progressive enhancement. Following this rule, the best way to solve your problem is by adding the html5 element <figure></figure>. Here is the doc and below is an example using your jsfiddle:
p {
text-align: justify;
}
figure { /* Then you can center your img inside the figure element */
text-align: center;
}
img { /* You don't need margin 0 auto or display block, let the browser do its work */
width: 6.25em;
height: 6.25em;
}
<p>
<figure> <!-- You can add several img in a figure element -->
<img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="First workspace" title="" />
<img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="Web-browser on the second workspace" title="" />
</figure>
</p>
SECOND
If you don't want to add an element to your HTML markup then CSS can only help you if you now how many images you will have and what will be their size. In this case you can calculate with calc() the dimensions needed and add a padding-left on first image. As you can see this is quite complicated, hard to maintain and definitely not considered as best practices. Here is an example:
p {
text-align: justify;
}
img {
width: 100px;
height: 100px;
}
p img:first-child {
margin-left: calc(50% - 100px)
}
<p>
<img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="First workspace" title="" />
<img src="https://dl.dropboxusercontent.com/u/70091792/Pages/2/workspace2.png" alt="Web-browser on the second workspace" title="" />
</p>
Good luck!

Answer 2

<p>
<img src="http://leone.ge/mem/img/image2.png" />
<img src="http://leone.ge/mem/img/image2.png" />
</p>
----
p{
display:block;
width:100%;
background:tan;
text-align:center
}
p img{
display:inline-block
}
view result here: http://jsfiddle.net/kr76uu46/2/

Answer 3

Here there are 7 css ways to center horizontally and vertically an element in the middle of a div (or a body). Than you can create a second div and you get your solution.
text-align:center
margin:auto
display:table-cell
position:absolute
translate function
flexbox
calc function
img{
width: 100%;
max-width: 150px; //your width
height: auto;
position: relative;
left: calc(25%);
}
<img id="b" src="http://placehold.it/150x150" alt="Sample Image 6">
<img id="a" src="http://placehold.it/150x150" alt="Sample Image 6">
Otherwise, if you are still interesting looking for different ways (css-based solution) check this LINK