html - 对称对齐文本

Question

我有一个 3 列的网站，左边的列用于显示固定装置。我的问题是我的文字没有按照我想要的方式对齐，如下图所示:

我希望文本以对称的方式直接对齐，如果这有意义的话？

我使用的 CSS 如下:

   //this is for the left box
    #leftbox{
    float:left;
    width:300px;
    height:1000px;
    border-right: 1px dotted #f00;
    border-bottom:none
}

//this is for the fixtures
#fixtures{
    position:relative;
    top: -20px;
}

//this is for the image R in fixtures
#fiximg{
    position:relative;
    top: 5px;
}

我使用一个名为 fixtures 的 PHP 包含文件，所以我不必在每个页面上手动更改 fixtures。

<?PHP

echo '<center>';
  echo'<h3>Super Rugby Fixtures & Predictions</h3>';


  //DATE1 COMES HERE           
   echo'<u>Friday 21 February</u>';


    //FIXTURE1 COMES HERE   
echo'<p id="fixtures"><strong>Crusaders vs Chiefs</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 06:35am(SA Time)<BR />';

     //Fixture 2
echo'<p id="fixtures"><strong>Cheetahs vs Bulls</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a>19:05 (SA Time)';
echo'<br>';    
          //DATE2 COMES HERE           
  echo'<u>Saturday 22 February</u>';
echo'<br>';  


      //FIXTURE COMES HERE   
echo'<p id="fixtures"><strong>Highlanders vs Blues</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 08:35am(SA Time)<BR />'; 

    //FIXTURE2
echo'<p id="fixtures"><strong>Brumbies vs Reds</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 10:45(SA Time)<BR />'; 

      //fixture3
echo'<p id="fixtures"><strong>Sharks vs Hurricanes</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 17:05(SA Time)<BR />'; 

    //fixture4
echo'<p id="fixtures"><strong>Lions vs Stormers</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 19:05(SA Time)<BR />';  

       //DATE4 COMES HERE
  echo'<u>Sunday 23 February</u>';  

       //fixture
       echo'<p id="fixtures"><strong>Waratahs vs Force</strong><a href="super_rugby_preview.php"><IMG id="fiximg" src="images/fixtures/preview.png"  /></a> 19:05(SA Time)<BR />';    


echo'</center>';

        ?>

任何帮助将不胜感激。

Answer 1

我喜欢做这些元素只是为了更多地了解 HTML/CSS。

这FIDDLE只是在各种“持有人”中使用 div(尽管表格也可以，因为它确实是表格数据)，可以让您轻松添加更多行。鉴于您的 PHP 要求，添加 <?php echo $mydate ?> 也同样容易.有数百种方法可以做到这一点，这只是其中一种。

CSS

.holderdiv {
  width: 70%;
}
.datediv {
  float: left;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 10px;
  text-decoration: underline;
}
.gamebox {
  float:left;
  width: 100%;
  height: 30px;
  margin-bottom: 10px;
}
.leftdiv {
  float: left;
  width: 43%;
  height: 30px;
  line-height: 30px;
  text-align: right;
  padding-right: 20px;
  border: 0px solid black;
}
.rightdiv {
  float: left;
  width: 43%;
  height: 30px;
  line-height: 30px;
  text-align: left;
  padding-left: 20px;
}
.logodiv {
    float: left;
    width: 5%;
    height: 30px;
    line-height: 30px;
    background-color: #cccccc;
    border-radius: 5px;
    text-align: center;
}