Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Centering image in a text display

  • maxersloan
  • maxersloan's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
1 year 7 months ago #231588 by maxersloan
Centering image in a text display was created by maxersloan
Please help us help you and fill where relevant:
Your LimeSurvey version: 2.6.7-lts
Own server or LimeSurvey hosting: own
Survey theme/template: tfr_responsive (from limesurvey template shop at survey-consulting.com)
==================
I'm trying to center an image in a text display. I figured this would be easy, either through the limesurvey menus or some HTML, however I can't seem to get it. Here is an example: [url] www.datamaxsurveys.net/surveys/index.php/216224?lang=en [/url]

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 7 months ago #231591 by holch
Replied by holch on topic Centering image in a text display
Code:
<h3 class="panel-title">
 
            <span class="question-text">
 
                <img alt="" src="/surveys/upload/surveys/216224/images/5%20Figure%20Graphic2_A.jpg" style="width: 500px; height: 500px;" />
            </span>
        </h3>

What is strange is that this is wrapped in a H3-Header tag, which is weird. Is this something you included?

Can you provide a LSS file of your survey?

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 7 months ago #231592 by holch
Replied by holch on topic Centering image in a text display
Just tested in my LS5 with the fruity theme and nor the H3 nor the span are there. So I assume this is something that comes from your theme.

You can't center anything in a span, not sure if this is the same for H3. Not sure if these come from the theme or from your tests though, so therefore I ask for the LSS to see what is from your tries and what comes from the theme. I don't understand why this would be wrapped in an H3 and a span anyway.

I tried in my installation with the obsolete center-tag around the image and it worked without an issue.

All in all I would recommend an update, because your LS 2.6.7-lts+171212 is very old (over 4 years) and hasn't received any updates or bug and security fixes since then. I don't have such an old version to test.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 7 months ago #231593 by tpartner
Replied by tpartner on topic Centering image in a text display
The image also overflows on mobile devices.

Try this:

Code:
<img alt="" src="/surveys/upload/surveys/216224/images/5%20Figure%20Graphic2_A.jpg" style="max-width: 500px; width: 100%; margin: 0 auto; display: block;">

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: holch, maxersloan

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 7 months ago #231595 by holch
Replied by holch on topic Centering image in a text display
So I opened your survey in Chrome and used "inspect" and changed the source code for testing purposes to 
Code:
<h3 class="panel-title">
  <DIV class="question-text" style="text-align:center">
  <img alt="" src="/surveys/upload/surveys/216224/images/5%20Figure%20Graphic2_A.jpg" style="width: 500px; height: 500px;" />
 </DIV>
</h3>

and the image is centered. So the problem is the span element, as expected. SPAN is an inline element while DIV is a block element.

So I changed the span to a div and gave it the style text-align:center and it worked.

Now the question is: Where does the span come from? If it is from the theme, you would need to change the theme. To be honest, if this comes from the theme, then you really should change the theme, because I don't know why anyone would wrap the whole question text for a text-display question into a H3 in the first place and then additionally into a span.
 

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 7 months ago #231596 by holch
Replied by holch on topic Centering image in a text display
Ahhh, great solution, Tpartner. This works even if the span element comes from the theme. Forgot that you can make an element a "block" via CSS.

I answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose