CSS - Metin Ortalayınca Ortaya Çıkan List Sorunu

02-01-2023, 18:53:10

Selamlar,
Bir sistemim var kullanıcılara girilen duyuruları ayrı bir link üzerinden okutuyorum.
Body içeriği tamamen text-align:center; olarak girili tüm içerik ortalanmış bir şekilde geliyor.
List, table gibi elementler eklenince listenin iconu satırın başına gidiyor.
Ortalanması gereken tablo sola yaslanıyor.
Bunu nasıl çözebilirim?

02-01-2023, 18:57:37

#2

Misafir

ul li {
display: inline-block;
}
ul {
text-align: center;
}

tworun ve bunu beğendi.

2 kişi bunu beğendi.

02-01-2023, 18:57:40

#3

Misafir

Kodları buradan iletin, düzenleyip gönderelim.

tworun bunu beğendi.

1 kişi bunu beğendi.

02-01-2023, 18:59:47

#4

tworun

Misafir adlı üyeden alıntı: mesajı görüntüle

ul li {
display: inline-block;
}
ul {
text-align: center;
}

Bu işimi çözmüyor malesef.

Albayraktech adlı üyeden alıntı: mesajı görüntüle

Kodları buradan iletin, düzenleyip gönderelim.

Sayfada pek CSS bulunmuyor, aşağıdan sayfanın tam içeriğine ulaşabilirsiniz.

**List elementlerini "list-style-position: inside;" kodu ile çözdüm fakat tablo için sorun devam ediyor.

<?php
  require_once('config.php');

  // Duyurunun ID'sini alın
  $id = $_GET['id'];

  // Veritabanından o ID'ye sahip duyuruyu çekin
  $sql = "SELECT a.id, a.title, a.body, a.created_at, a.archived, c.name FROM announcements a
          JOIN categories c ON a.category_id = c.id
          WHERE a.id = $id";
  $result = mysqli_query($conn, $sql);

?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Duyuru Oku</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <style type="text/css">
    body { background-color:#f3f3f3; }
    .masthead-heading a:hover { color: #fcd700; }
    img { border-radius:5px; }
  </style>
</head>
<body>

<header style="
    padding: 50px;
    text-align: center;
    color: #000000;
    background-image: url(assets/img/test2-1.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    height: 400px;
" class="masthead">

<?php
  if ($result) {
    // Duyuru çekildi
    $row = mysqli_fetch_assoc($result);
    if ($row['archived'] == 1) {
      // Duyuru arşivlenmiş, uyarı mesajı yazdırın
      echo '<div class="container">    ';
      echo '<img src="assets/img/logo-s.png"/>';
      echo '<div class="masthead-subheading">' . "<h2 style='font-size:50px; color:#fff;'>Bu duyuru arşivlenmiştir.</h2>" . '</div>';
      echo '</div>';
      echo '</header>';
      echo '<div class="container"';
      echo '</div>';
    } else {
      // Duyuru görüntülenmeli
      // Duyuru içeriğini yazdırın
      echo '<div class="container">    ';
      echo '<img style="width:100px;" src="assets/img/logo-s.png"/>';
      echo '<div class="masthead-subheading">' . "<h2 style='font-size:50px; color:#fff;'>" . $row['title'] . "</h2>" . '</div>';
      echo '<div class="masthead-heading text-uppercase">' . "<p style='font-size:20px; color:#fff;'>" . $row['created_at'] . "</p>" . '</div>';
      echo '<div class="masthead-heading">' . "<p style='margin-top:-10px; font-size:20px; color:#fff;'>Bölüm: " . $row['name'] . "</p>" . '</div>';
      echo '<div style="margin-top: -10px;" class="masthead-heading">' . "<a style='font-size: 13px; text-decoration: none; color:#000; border-bottom: 1px solid #000;' href='https://com.tr'>Cloud'a Dön</a>" . '</div>';
      echo '</div>';
      echo '</header>';
      echo '<div class="container"';
      echo '<p style="text-align:center;">' . $row['body'] . '</p>';
      echo '</div>';
    }
  } else {
    // Sorgu başarısız ise hata mesajını yazdırın
    echo "Hata: " . mysqli_error($conn);
  }
?>

</body>
</html>