Centering method of the image

Permalink Browser Info Environment
I am a beginner.
I want to place the image of the image block in the center.
How do I.

Type: Discussion
Status: In Progress
HidehikoMICHIHIRO
View Replies:
jordif replied on at Permalink Reply
jordif
Hi,

you have 2 options:

A) Click on the Gear Icon in the toolbar, select Design -> Theme -> Customize, and paste the following code into the Custom CSS area:

.center-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


This will create the class "center-image", that you can add to any image block to make it centered.

So now you only need to click on the Image Block, choose "Design & Custom Template", click on the Gear Icon and enter the following custom class: "center-image" (with no quotes).

(I will add this class in the next version of the theme to make it easier to center image blocks).

B) You can add the image using a Content Block (instead of an image block). If you insert an image using a Content block, the image will be centered by default (but it will not be responsive).

Please let me know if you have any further questions,

Jordi
HidehikoMICHIHIRO replied on at Permalink Reply
HidehikoMICHIHIRO
Hi, Jordi.

It was completed! Thank you very much!
In the next update, we expect editing functions of the image (the ellipse, rounded corners, etc).

HIdehiko MICHIHIRO
jordif replied on at Permalink Reply
jordif
Hi!

First, thanks for the review :)

I will add additional classes in the next update for circle and rounded images.

Regards,

Jordi
HidehikoMICHIHIRO replied on at Permalink Reply 1 Attachment
HidehikoMICHIHIRO
Hi,Jordi

After installing to 8.0.3, it became like this. what should I do?

Hidehiko MICHIHIRO
jordif replied on at Permalink Reply
jordif
Hi Hidehiko,

can you send me a link to your site so I can have a look?

Does this happen only when you're logged in? Is the website ok if you visit it as a visitor (with a different browser)?

Jordi
HidehikoMICHIHIRO replied on at Permalink Reply
HidehikoMICHIHIRO
Hi, Jordi. Thank you for your reply.
My website address is "http://melodious.jp/"
The phenomenon is the same for Chrome, Safari and FireFox.
Ask you.
jordif replied on at Permalink Reply
jordif
Hi!

It seems you added a CSS rule in the main.css file. In line 6, you have this:

width: 960px;


This is not included in the theme, so you probably added this at some point. Can you try removing that or installing a fresh copy of the theme?

Regards,

Jordi
HidehikoMICHIHIRO replied on at Permalink Reply
HidehikoMICHIHIRO
Hi, Jordi.

The problem was settled.
Thank you very much.

Hidehiko MICHIHIRO
DevilDiva replied on at Permalink Reply
DevilDiva
Thank you so much, very clear instruction for newb.
AthanD replied on at Permalink Reply
AthanD
Hi Jordi,

I have a few images at the bottom of my first page that i am trying to centre using this method.

I have copied the code:
.center-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
into my design>themes>customize>CSS
and then add the custom class center-image to the image but the images are not moving into the center of the blocks.
Any suggestions?
Cheers,

Athan
AthanD replied on at Permalink Reply
AthanD
Hi Jordi,

All sorted.... my code in the CSS was a bit off :(

concrete5 Environment Information

# concrete5 Version
Core Version - 5.7.5.6
Version Installed - 5.7.5.6
Database Version - 20151221000000

# concrete5 Packages
Long Story Short (1.1.2).

# concrete5 Overrides
languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR, languages/da_DK/LC_MESSAGES/messages.mo, languages/da_DK/LC_MESSAGES, languages/da_DK, languages/de_DE/LC_MESSAGES/messages.mo, languages/de_DE/LC_MESSAGES, languages/de_DE, languages/el_GR/LC_MESSAGES/messages.mo, languages/el_GR/LC_MESSAGES, languages/el_GR, languages/es_PY/LC_MESSAGES/messages.mo, languages/es_PY/LC_MESSAGES, languages/es_PY, languages/fi_FI/LC_MESSAGES/messages.mo, languages/fi_FI/LC_MESSAGES, languages/fi_FI, languages/fr_FR/LC_MESSAGES/messages.mo, languages/fr_FR/LC_MESSAGES, languages/fr_FR, languages/it_IT/LC_MESSAGES/messages.mo, languages/it_IT/LC_MESSAGES, languages/it_IT, languages/ja_JP/LC_MESSAGES/messages.mo, languages/ja_JP/LC_MESSAGES, languages/ja_JP, languages/nb_NO/LC_MESSAGES/messages.mo, languages/nb_NO/LC_MESSAGES, languages/nb_NO, languages/nl_NL/LC_MESSAGES/messages.mo, languages/nl_NL/LC_MESSAGES, languages/nl_NL, languages/pl_PL/LC_MESSAGES/messages.mo, languages/pl_PL/LC_MESSAGES, languages/pl_PL, languages/pt_BR/LC_MESSAGES/messages.mo, languages/pt_BR/LC_MESSAGES, languages/pt_BR, languages/ru_RU/LC_MESSAGES/messages.mo, languages/ru_RU/LC_MESSAGES, languages/ru_RU, languages/sv_SE/LC_MESSAGES/messages.mo, languages/sv_SE/LC_MESSAGES, languages/sv_SE, languages/tr_TR/LC_MESSAGES/messages.mo, languages/tr_TR/LC_MESSAGES, languages/tr_TR

# concrete5 Cache Settings
Block Cache - On
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).

# Server Software
Apache/2.2.29

# Server API
cgi-fcgi

# PHP Version
5.6.17

# PHP Extensions
cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, gd, gettext, gmp, hash, iconv, json, libxml, mbstring, mcrypt, mysql, mysqli, mysqlnd, openssl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, posix, Reflection, session, SimpleXML, snmp, soap, SPL, sqlite3, standard, tokenizer, xml, xmlreader, xmlwriter, xsl, Zend OPcache, zip, zlib.

# PHP Settings
max_execution_time - 30
log_errors_max_len - 1024
max_file_uploads - 20
max_input_nesting_level - 64
max_input_time - -1
max_input_vars - 1000
memory_limit - 128M
post_max_size - 8M
sql.safe_mode - Off
upload_max_filesize - 2M
mysql.max_links - Unlimited
mysql.max_persistent - Unlimited
mysqli.max_links - Unlimited
mysqli.max_persistent - Unlimited
pcre.backtrack_limit - 1000000
pcre.recursion_limit - 100000
session.cache_limiter - <i>no value</i>
session.gc_maxlifetime - 1440
soap.wsdl_cache_limit - 5
opcache.max_accelerated_files - 2000
opcache.max_file_size - 0
opcache.max_wasted_percentage - 5

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:44.0) Gecko/20100101 Firefox/44.0

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.