How to center an element?

Question

I want to center an element for uploading files. Now it is left-aligned.

<p class="text-muted">Bla-bla-bla
<input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
</p>

I tested ).text-align = 'center';", but it does not work.

UPDATE:

<div class="col-md-4">
                    <span class="fa-stack fa-4x">
                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
                        <i class="fa fa-tasks fa-stack-1x fa-inverse"></i>
                    </span>
                    <h4 class="service-heading">Practical Session #1</h4>
                    <p class="text-muted" style="text-align:center;">Bla-bla-bla
                    <input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" /></p>              
                </div>

With `text-align:center;` https://jsfiddle.net/33191hsp/ as described in the duplicate question. — web-tiki, Jan 23 '16 at 11:16
@web-tiki: Thank you. However I don't want to touch my CSS style sheet, because
has different settings in other parts of the code. I want to apply centering to my particular element. — Klausos Klausos, Jan 23 '16 at 11:19
@web-tiki: Still doesn't work in my code. ok, thanks. I'll check other options. — Klausos Klausos, Jan 23 '16 at 11:25

Theo Leinad · Accepted Answer · 2016-01-23T12:07:48.040

0

Use the inline style : style="display: block; margin: 0 auto; this should fix it

<div class="buttonHolder">
<p class="text-muted" style="text-align:center;">Bla-bla-bla</p>
<input type="file" name="attachment" class="attachment" onchange="document.getElementById('moreUploadsLink');" style="display: block; margin: 0 auto;"/></p>              

</div>

edited Jan 23 '16 at 12:07

answered Jan 23 '16 at 11:11

Theo Leinad

115
1
7

The `` element [is deprecated](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) – web-tiki Jan 23 '16 at 11:13
@web-tiki: You've marked it as a duplicate question. I tried solutions proposed in the duplicate thread. Still nothing works. – Klausos Klausos Jan 23 '16 at 11:16
try changing
for
– Theo Leinad Jan 23 '16 at 11:18
No, it doesn't help. Just the color style of a text is changed. – Klausos Klausos Jan 23 '16 at 11:20
@TheoLeinad can you please explain how only changing the class of the element can affect it's styling? – web-tiki Jan 23 '16 at 11:21
The style should be already stated in the CSS, I thought he was using a proper CSS, I just edited the answer (from the duplicate quesiton/answer) It should work (for the text). To center the button margin-left and right need to be setted as auto, as far as I remember. – Theo Leinad Jan 23 '16 at 11:28
Adding .buttonHolder{ text-align: center; } to the main style sheet neither solved this particular issue. I still have the text Bla-bla-bla centered, while the Button is left-aligned. – Klausos Klausos Jan 23 '16 at 11:32
can you explain with code and images, seems your issue is so simple, but hard to understand... – Theo Leinad Jan 23 '16 at 11:33
Please see my update. I tried to add
, but it didn't help. That's why in the Update I put my original code.
– Klausos Klausos Jan 23 '16 at 11:38
I am using this template: http://startbootstrap.com/template-overviews/agency/ This is the GitHub link: https://github.com/BlackrockDigital/startbootstrap-agency/tree/gh-pages/css The CSS file is called agency.css. I cannot post it here because it's quite long. – Klausos Klausos Jan 23 '16 at 11:43
@KlausosKlausos well the tag worked for me, place the input button in the middle of this tags... – Theo Leinad Jan 23 '16 at 11:56
Thanks. This tag will be removed, however I will use it for a temporal problem solving. – Klausos Klausos Jan 23 '16 at 12:01
@KlausosKlausos Just fixed it, please try the CSS solution, if not, I'm out of ideas, thanks :) – Theo Leinad Jan 23 '16 at 12:08

How to center an element?

1 Answers1