如何垂直對齊我的div中的文本

這是我的頭腦。我不能讓我的文本垂直對齊我的頁腳。基本文本是我想要的地方，但是登錄鏈接最終會在頁腳的頂部。另外，當我登錄並讓我的其他選項顯示頁腳右側的文本不顯示時。請幫忙。如何垂直對齊我的div中的文本

頁腳代碼：

<?php 
     include ("Includes/closeDB.php"); 
    ?> 
     <footer> 
      <div class="footer-wrapper"></div> 
      <div class="footer-wrapper"> 
       <div class="float-left"><p id="social">Site Map</p></div> 
       <div id="login"> 
          <?php 
           if (logged_on()) 
         { 
          echo '<li><a href="/logoff.php">Sign out</a></li>' . "\n"; 
          echo '<li><a href="/addpage.php">Add</a></li>' . "\n"; 
          echo '<li><a href="/selectpagetoedit.php">Edit</a></li>' . "\n"; 
          echo '<li><a href="/deletepage.php">Delete</a></li>' . "\n"; 
          if (is_admin()) 
          { 

          } 
         } 
         else 
         { 
          echo '<li><a href="/logon.php">Admin Log In</a></li>' . "\n"; 
         } 
         ?> 

         <?php if (logged_on()) { 
          echo "<div class=\"welcomeMessage\">Welcome, <strong>{$_SESSION['username']}</strong></div>\n"; 
         } ?> 
       </div> 

       <div class="float-right"><p id="social">&copy; Swing and Putt 2014</p></div> 
      </div> 
     </footer> 
    </body> 
</html>

CSS：

.float-left { 
float: left; 
color: #000000; 
text-align: left; 
padding-left: 10px; 
} 

.float-right { 
float: right; 
color: #000000; 
text-align: right; 
padding-right: 10px; 
} 

footer { 
clear: both; 
font-size: 12pt; 
height: 30px; 
margin-top: -30px; /* negative value of footer height */ 
position: relative; 
background-color: #00BFFF; 
padding: 5px; 
}  

footer .footer-wrapper { 
} 

/* login 
----------------------------------------------------------*/ 
#login { 
display: block; 
font-size: 12pt; 
font-family: Arial; 
float: left; 
} 

#login a { 
margin-left: 10px; 
margin-right: 3px; 
padding: 2px 3px; 
text-decoration: none; 
} 

#login a.username { 
background: none; 
margin-left: 0px; 
text-decoration: underline; 
} 

#login ul { 
margin: 0; 
} 

#login li { 
display: inline; 
list-style: none; 
}

希望所有有道理。我正在努力與PHP類型的東西。

來源

2014-04-20 lokismind

扔了演示或擺弄 – JayD

你能後的輸出，而不是PHP代碼？這裏的問題在於樣式和生成的HTML，人們可以嘗試並更改它。 – GolezTrol

[垂直對齊Div中的文本]的可能重複（http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div） –

在這裏，我使用演示頁腳鏈接並粘貼整個HTML和CSS。你剛纔更改CSS類頁腳頁腳高度

height: 180px; 
margin-top: 0px;

/*負值*/

這些並添加#login李塊

float: left; 
clear: both; 
margin-bottom: 10px;

這三個特性，並希望能解決您的問題。此外，我附上我的演示菜單預覽圖像，你可以看到它是對的還是錯的。

enter image description here

<html> 
<head> 
    <title>Demo Title</title> 
    <style type="text/css"> 
     .float-left { 
      float: left; 
      color: #000000; 
      text-align: left; 
      padding-left: 10px; 
     } 

     .float-right { 
      float: right; 
      color: #000000; 
      text-align: right; 
      padding-right: 10px; 
     } 

     footer { 
      clear: both; 
      font-size: 12pt; 
      height: 180px; 
      margin-top: 0px; /* negative value of footer height */ 
      position: relative; 
      background-color: #00BFFF; 
      padding: 5px; 
     } 

     footer .footer-wrapper { 
     } 

     /* login 
     ----------------------------------------------------------*/ 
     #login { 
      display: block; 
      font-size: 12pt; 
      font-family: Arial; 
      float: left; 
     } 

     #login a { 
      margin-left: 10px; 
      margin-right: 3px; 
      padding: 2px 3px; 
      text-decoration: none; 
     } 

     #login a.username { 
      background: none; 
      margin-left: 0px; 
      text-decoration: underline; 
     } 

     #login ul { 
      margin: 0; 
     } 

     #login li { 
      display: inline; 
      list-style: none; 
      float: left; 
      clear: both; 
      margin-bottom: 10px; 
     } 
    </style> 
</head> 
<body> 
<footer> 
    <div class="footer-wrapper"></div> 
    <div class="footer-wrapper"> 
     <div class="float-left"><p id="social">Site Map</p></div> 
     <div id="login"> 
      <ul> 
      <li><a href="/logoff.php">Sign out</a></li> 
      <li><a href="/addpage.php">Add</a></li> 
      <li><a href="/selectpagetoedit.php">Edit</a></li> 
      <li><a href="/deletepage.php">Delete</a></li> 
      <li><a href="/logon.php">Admin Log In</a></li> 
      </ul> 
    </div> 

    <div class="float-right"><p id="social">&copy; Swing and Putt 2014</p></div> 
    </div> 
</footer> 
</body> 
</html>

來源

2014-04-20 06:20:32 Moinul

如何垂直對齊我的div中的文本

回答

相關問題