hosting tutorials WeChat Top

👋🏼Welcome to my WP-Host blog where I am excited to share my knowledge and expertise on WordPress hosting and website construction tutorials with you. Let’s connect and learn from each other! You can reach me at info@yrshare.com.

Email Me

(如果你会中文,可以点击微信图标与我联系。)

扫一扫加我

注:因个人英文水平有限,所以暂时只能为懂中文的朋友提供wordpress建站服务

微信:18200592859 或 yrwordpress

Automatically center images on a wordpress website

2023032308113082

Automatically center images on a wordpress website: If there are some small pictures in your wordpress website, they don’t look so coordinated by default, so we can add a centering effect to the picture, but it is more troublesome to add this to each picture, so today’s wordpress tutorial will give Let’s share how to automatically center all the pictures in the wordpress website.

【WP-Host/悦然wordpress建站】

Keep sharing wordpress tutorials.
When we edit the content of the website, we generally choose to center the picture, which can make the overall layout look more beautiful. Some wordpress website building themes may have the function of centering pictures, but most of them do not.

2023032308162996

So under normal circumstances we will manually set the picture drama.
Select the picture in the wordpress block editor, and then set it as shown above to center the picture.
If you have pictures in each article that need to be centered on the device, then this operation may be too troublesome. Next, I will share with you two methods.

Method 1: Increase the image size

Under normal circumstances, wordpress theme templates have a maximum image display size.
Assuming that the maximum display size of your WordPress theme is 800 PX, then you only need to give each article a picture greater than or equal to 800 PX, so that the picture will be spread horizontally, and the display effect is the same as that of centering.

Method 2: Set CSS style

Add the following CSS style to the style.css file of the current wordpress website building theme and save it, and then clear the cache, so that the pictures of future articles will be automatically displayed.

.entry-content img {
display: flex;
margin: 0 auto;
}

继续分享wordpress建站教程。我们在编辑网站内容时一般都会选择让图片居中,这样可以让整体的排版看起来更加美观,有一些wordpress建站主题可能会自带图片居中的功能,但大多数是没有的。

2023032308162996

所以一般情况下我们都会通过手动设置图片剧中。在wordpress的区块编辑器中选中图片,然后如上图这样设置就可以让图片居中了。如果你每篇文章都有图片需要设备居中,那么这样操作可能就太麻烦了,接下来给大家分享两个方法。

方法一:提高配图尺寸大小

一般情况下wordpress主题模板都有一个最大的图片显示尺寸。假设你的wordpress主题的最大显示尺寸是800PX,那么你只需要给每篇文章的配图大于等于800PX就可以了,这样图片就会横向铺满,显示效果与居中是一样的。

方法二:设置CSS样式

把下面的CSS样式添加到当前wordpress建站主题的style.css文件中保存,然后清除缓存,这样以后的文章图片就会自动剧中了。

.entry-content img {
display: flex;
margin: 0 auto;
}
WordPress Hosting / 悦然wordpress建站

WordPress Hosting / 悦然wordpress建站

【WordPress Hosting / 悦然wordpress建站】I am a WordPress hobby from China, and I like to communicate with friends from all over the world to learn WordPress website building and maintenance related knowledge.