CODEWITHSUNDEEP
javascripthtmlcss
hamood46
hamood46

Reputation: 25

How can I center a list in html?

This is my website https://acanhs.org/nhs-articles.html I want to center the list so it looks nicer. How can I do that? I tried using the <center> tag but had no luck. I would like to centre the name and date under the article name to make it look nicer

This is my html:

a:link {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: Black;
  background-color: transparent;
  text-decoration: none;
}
<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>ACA NHS</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<center>
  <section class="blog-posts grid-system">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="all-blog-posts">
            <center>
              <div class="row">
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb"><img src="assets/images/blog-thumb-01.jpg" alt=""></div>
                    <div class="down-content">
                      <h4>الأمير الراحل … أمير الإنسانية</h4>
                      <ul class="post-info">
                        <li>Mohammad Al-Obaidi</li><br>
                        <li>3/10/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الأمير الراحل … أمير الإنسانية.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb"><img src="assets/images/blog-thumb-02.jpg" alt=""></div>
                    <div class="down-content">
                      <h4>Uyghur Muslims</h4>
                      <ul class="post-info">
                        <li>Khalid Kooheji</li><br>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Uyghur Muslims.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb"><img src="assets/images/blog-thumb-02.jpg" alt=""></div>
                    <div class="down-content" onclick="window.location='articlepdfs/Corona Virus A New World.pdf';">
                      <h4>Corona Virus: A New World</h4>
                      <ul class="post-info">
                        <li>Majed Al-Shaheen</li><br>
                        <li>27/9/2020</li>
                      </ul>
                      <div class="btn download">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb"><img src="assets/images/blog-thumb-03.jpg" alt=""></div>
                    <div class="down-content">
                      <h4>التعلم عبادة</h4>
                      <ul class="post-info">
                        <li>Omar Sheir</li><br>
                        <li>23/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/التعلم عبادة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb"><img src="assets/images/blog-thumb-04.jpg" alt=""></div>
                    <div class="down-content">
                      <h4>الصدقة</h4>
                      <ul class="post-info">
                        <li>Ahmad Al-Mazrouei</li><br>
                        <li>20/9/2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الصدقة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </center>
          </div>
        </div>
      </div>
    </div>
  </section>
</center>
</body>

</html>

Upvotes: 1

Views: 123

Answers (1)

Luke
Luke

Reputation: 1181

The way your content is generated is causing you a few headaches, along with your float: left for each <li>.

Solution 1: Generate your HTML differently

This might not be viable, but if you could put it in just 1 tag (e.g. <p>Name | Date</p>) then it would solve your problem.

Solution 2: Display inline-block

I've removed pretty much all your styling for li elements. The only rule I have is:

li{
   display: inline-block;
}

.blog-posts .down-content ul.post-info li:after {
    content: '|';
    color: #aaa;
    margin-left: 8px;
}

This puts both li tags onto the same line but doesn't open you up to any float issues. Because the content is already centered, your text is centered too. You do have this set up, but in stylesheet.css on line 81 you are overriding this!!!

Upvotes: 1

Related Questions