I’m trying to center my unordered list. When I use “text-center” class it puts a big space between the bullet and my text. Is there a different way I should approach this? Also, I can’t seem to center my pic.
I know I could use a div class=“text-center” and place my whole page in there but it messes with the unordered list as stated above.
We can help you better if you provide a link to your codepen.
Sure, there’s not much there yet. I just started it.
text-center affects the content or child elements. so you could add it to the parent div to have all things centered
<div class="col-xs-12 text-center">
this is also why your image is not getting centered
Yes I did originally try that but as stated, it messed with the unordered list for some reason, giving a huge space between the bullet and list.
ok, wasn’t clear to me what you wanted it to do
list-style-position: inside; for the
I don’t think you want to center the list, per se, just move it to the right. Here’s what I came up with:
<h1 class="text-center">Jimi Hendrix</h1>
<h4 class="text-center">The man who revolutionized guitar</h4>
<img src = "http://uptownmagazine.com/files/2012/05/Jimi-Hendrix.jpg">
<div id = "myList">
<li>born Johnny Allen Hendrix; November 27, 1942 – September 18, 1970</li>
<li>Born in Seattle, Washington</li>
<p>If you would like to read more about <a href ="https://en.wikipedia.org/wiki/Jimi_Hendrix" target="_blank"> Jimi Hendrix</a>
<p>Written and coded by Steve DeYoung</p>
margin: 0 auto;
padding: 5px 20%;
This allows you to love the list a little to the right - here it assumes that you want 20% of padding on each side of the screen.
I also removed your col-xs-20 as I had no idea what it was doing. You can add it back in if you want.
That did the trick! Thanks ksjazzguitar!