3

I'm creating a website in Dreamweaver using Bootstrap, and I'm having trouble getting my text to centre in any of the columns.

I've tried changing the CSS to as follows (as an example):

.p9 {
    font-family: Roboto-light;
    text-align: center;
    color: #171717;
    font-size: 16px;
    font-weight: 300;
    line-height: 18px;
}

And when this didn't work, I removed the text-align attribute from the CSS and changed the paragraph class to .text-center using the correct Bootstrap class.

I've noticed a few little buggy issues such as classes not appearing until I save the document, or having to remove then re-add classes on images to get them to work/appear so I'm not sure if it's related?

Does anyone have any idea why neither is working? Thank you!

3
  • 1
    I believe this is a question for stackoverflow.com
    – PieBie
    Jul 12, 2016 at 8:41
  • 1
    Assuming your example code just missed out the dot, what's happening is that text-align in your class is being overridden by something more specific. Open the page in a browser and use the developer tools there to see what CSS is affecting the text-alignment
    – Cai
    Jul 12, 2016 at 8:49
  • Comments are not for extended discussion; this conversation has been moved to chat.
    – Vincent
    Jul 12, 2016 at 9:10

3 Answers 3

4

Without seeing the page itself or any more code what I'm assume is that the text-align is being overridden by a more specific selector (either an #id or more specific class)

You can read more about CSS specificity here:

To see exactly what CSS is affecting the element in question you can use the developer tools of your browser. I will use Google Chrome as an example but there are similar tools in most modern browsers.

  1. Right-Click the element you are interested in and select "Inspect".

Chrome Inspect

  1. The Developer Tools window will open with the element you are interested in selected in the DOM outline. Open to the "Computed" tab.

Chrome Developer Tools Computer Tab

  1. From there you can scroll down to the property you are interested in (text-align in this case), clicking the arrow to the left of the property will open a list of all the CSS that is affecting that property—the top one being the one that actually applies.

    From the information here you should be able to figure out how to fix your code. Most probably by removing a style in a previous declaration or increasing the specificity of the style you want to apply.

You can read more about Chrome's developer tools here:

2
  • Brilliant answer thank you Cai - this was the issue with other CSS interfering. Hope this helps others with the same problem. Cheers! Jul 12, 2016 at 9:37
  • No problem at all @crazycatlady glad to help
    – Cai
    Jul 12, 2016 at 9:38
1

I believe you are not identifying the class or paragraph you are using correctly. If you are using a class, put a dot in front of the name.

.p9 {
 font-family: Roboto-light;
 text-align: center;
 color: #171717;
 font-size: 16px;
 font-weight: 300;
 line-height: 18px;
}

Aside from this I would strongly recommend changing editor.

3
  • Thanks, I've realised I missed the . in my copy-and-paste! I've tried shutting down and restarting and a lot of the buggy issues in DW have righted themselves, although I'm still having the issue with the text. Might be something to do with the programme, I'm thinking. Jul 12, 2016 at 8:54
  • @crazycatlady don't preview your website in dreamweaver. It's everything but a good editor, and it's certainly bad at previewing html/css. Preview the website in your browser (just open the html files in your browser).
    – Summer
    Jul 12, 2016 at 8:56
  • Hello JaneDoe1337, welcome to GD.SE and thanks for your input. Please refrain from on-topic / off-topic discussions in your answer. When your reputation reaches 15, you can flag questions to suggest them being closed as off-topic. Moreover, please don't go off-topic. Whether a certain program is a good or a bad editor is up to opinion and we don't like extended discussion about subjects like those on the main site. Thanks for understanding!
    – Vincent
    Jul 12, 2016 at 9:02
1

I've figured out the issue: I'd applied some CSS to an outer container that seemed to be affecting the text - after removing this the text has started aligning properly. Thanks for your answers everyone. I hope this is an OK way for me to close the question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.