: My text won't center in Dreamweaver (using bootstrap) 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
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!
More posts by @Angela777
3 Comments
Sorted by latest first Latest Oldest Best
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:
CSS-Tricks — Specifics on CSS Specificity
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.
Right-Click the element you are interested in and select "Inspect".
The Developer Tools window will open with the element you are interested in selected in the DOM outline. Open to the "Computed" tab.
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:
Chrome Developers — DevTools
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.