When you place the image, click on it and you will see alignment options appear to above the image (when in visual editor tab).
For text, highlight the text you want to align, then find the alignment buttons (next to blockquote).
This will allow you to align the content horizontally.
The content’s vertical alignment will depend on where you’ve placed it into the editor.
If you need any further assistance, post a link any perhaps I can provide a CSS solution.
-Kevin
Hey Kevin,
Basically, I’ve added a new widget section before the post title (see example http://www.bylauraiancu.com/how-to-start-a-blog/). I would like the text and image to be vertically aligned. Also, as it is right now, on mobile devices the image/text don’t perfectly align center (although they do rearrange, the image on top of the text).
Thanks!
Try this CSS and let me know if this is what you’re after:
img.wp-image-83.alignleft.freebiemargin {
float: none;
margin-right: auto;
margin-left: auto;
}
Actually, this gets the image on top of the text on desktops as well. So not what I was after.
Not sure I was very clear before… On desktops, I want the image and text next to each other (horizontally centered to the screen, and with a bit of padding, so it won’t touch the edge of the screen – right now padding is 5% and I think it looks great), BUT I want them to vertically align middle depending on whichever is higher, the text or the image..
On mobile devices, I want the image to go on top of the text (which right now it does), but I want the image centered on the screen (right now the image is aligned right to the screen, basically it touches the edge of the screen).
Let me know if this makes more sense. If not, I can send you some screenshots.
Thanks so much!
Laura
Sorry about that! Try this CSS instead:
img.wp-image-83.alignleft.freebiemargin {
margin: 10px 30px;
}
@media (max-width: 992px) {
img.wp-image-83.alignleft.freebiemargin {
margin-right: auto;
margin-left: auto;
float: none;
}
}
-Kevin
Thanks a million, Kevin! 🙂
