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!