यह मेरी वेबसाइट है https://acanhs.org/nhs-articles.html मैं सूची को केंद्र में रखना चाहता हूं ताकि यह अच्छी लगे। मैं वह कैसे कर सकता हूं? मैंने <center> टैग का उपयोग करने की कोशिश की लेकिन कोई भाग्य नहीं था। मैं नाम और तारीख को लेख के नाम के नीचे केन्द्रित करना चाहता हूं ताकि यह अच्छा दिखे

यह मेरा एचटीएमएल है:

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>
1
hamood46 12 अक्टूबर 2020, 14:25

1 उत्तर

सबसे बढ़िया उत्तर

जिस तरह से आपकी सामग्री तैयार की जाती है, उसके कारण आपको कुछ सिरदर्द हो रहे हैं, साथ ही प्रत्येक <li> के लिए आपके float: left भी।

समाधान 1: अपना HTML अलग तरीके से जेनरेट करें

यह व्यवहार्य नहीं हो सकता है, लेकिन यदि आप इसे केवल 1 टैग (जैसे <p>Name | Date</p>) में डाल सकते हैं तो यह आपकी समस्या का समाधान करेगा।

समाधान 2: इनलाइन-ब्लॉक प्रदर्शित करें

मैंने li तत्वों के लिए आपकी सभी स्टाइलिंग को काफी हद तक हटा दिया है। मेरे पास एकमात्र नियम है:

li{
   display: inline-block;
}

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

यह दोनों li टैग को एक ही पंक्ति में रखता है लेकिन आपको किसी भी float समस्या के लिए नहीं खोलता है। चूंकि सामग्री पहले से ही केंद्रित है, इसलिए आपका पाठ भी केंद्रित है। आपके पास यह सेट अप है, लेकिन stylesheet.css लाइन 81 पर आप इसे ओवरराइड कर रहे हैं!!!

1
Luke 12 अक्टूबर 2020, 14:44