如何将CSS对DIV文本左/右中心

时间:2015-11-22 21:30:13

标签: css css-float

我有一些问题集中在一些div中,其中一些应该出现在中心位置,另一些位于中心位置,有些位于换行位置。例如

< div class =" container">
< div class =" leftofcenter"> Mr< / div>
< div class =" leftofcenter">名字< / div>
< div class =" rightofcenter"> Surname< / div>
< div class =" leftofcenter">地址< / div>
< div class =" leftofcenter"> Town,< / div>
< div class =" rightofcenter">邮政编码< / div>
< / DIV>

应显示为(文本长度因块而异):

Imports System.Collections.ObjectModel
Imports Windows.UI.Xaml.Documents
Public NotInheritable Class MainPage
    Inherits Page

    Private Sub MainPage_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
        SetItemSource()
    End Sub
    Private Sub SetItemSource()
        Dim source As New List(Of AddressBook)()
        source.Add(New AddressBook("Joe", "Smith", "US", "48579347594")) '1
        source.Add(New AddressBook("Jim", "Johnson", "UK", "3423423423")) '2
        source.Add(New AddressBook("Mary", "Robert", "India", "9384394793")) '3
        source.Add(New AddressBook("Patricia", "James", "France", "9384394793")) '4
        source.Add(New AddressBook("Linda", "Williams", "Italy", "9384394793")) '5
        source.Add(New AddressBook("David", "Jones", "US", "9384394793")) '6
        source.Add(New AddressBook("Elizabeth", "Martinez", "US", "9384394793")) '7
        source.Add(New AddressBook("Richard", "Robinson", "Germany", "9384394793")) '8
        source.Add(New AddressBook("Charles", "Clark", "US", "9384394793")) '9
        source.Add(New AddressBook("Joseph", "Rodriguez", "France", "9384394793")) '10
        source.Add(New AddressBook("Susan", "Lewis", "Italy", "9384394793")) '11
        source.Add(New AddressBook("Thomas", "Lee", "US", "9384394793")) '12
        source.Add(New AddressBook("Margaret", "Walker", "US", "9384394793")) '13
        source.Add(New AddressBook("Christopher", "Hall", "UK", "9384394793")) '14
        source.Add(New AddressBook("Lisa", "Allen", "US", "9384394793")) '15
        source.Add(New AddressBook("Daniel", "Young", "US", "9384394793")) '16
        source.Add(New AddressBook("Paul", "Hernandez", "US", "9384394793")) '17
        source.Add(New AddressBook("Karen", "King", "US", "9384394793")) '18
        source.Add(New AddressBook("Ruth", "Wright", "US", "9384394793")) '19
        source.Add(New AddressBook("Steven", "Lopez", "US", "9384394793")) '20
        source.Add(New AddressBook("Edward", "Hill", "US", "9384394793")) '21
        source.Add(New AddressBook("Sharon", "Scott", "US", "9384394793")) '22
        source.Add(New AddressBook("Brian", "Green", "US", "9384394793")) '23
        source.Add(New AddressBook("Michelle", "Ramos", "US", "9384394793")) '24
        source.Add(New AddressBook("Ronald", "Mason", "India", "9384394793")) '25
        source.Add(New AddressBook("Laura", "Crawford", "US", "9384394793")) '26
        source.Add(New AddressBook("Anthony", "Burns", "US", "9384394793")) '27
        source.Add(New AddressBook("Sarah", "Gordon", "India", "9384394793")) '28
        source.Add(New AddressBook("Kevin", "Hunter", "US", "9384394793")) '29
        source.Add(New AddressBook("Kimberly", "Tucker", "US", "9384394793")) '30
        source.Add(New AddressBook("Jason", "Dixon", "US", "9384394793")) '31
        source.Add(New AddressBook("Deborah", "Mills", "US", "9384394793")) '32
        source.Add(New AddressBook("Matthew", "Warren", "US", "9384394793")) '33
        source.Add(New AddressBook("Jessica", "Nichols", "US", "9384394793")) '34
        source.Add(New AddressBook("Gary", "Knight", "US", "9384394793")) '35
        source.Add(New AddressBook("Shirley", "Ferguson", "US", "9384394793")) '36

        listView1.ItemsSource = source

    End Sub
Public Class AddressBook
    Public Property FirstName() As String

    Public Property LastName() As String

    Public Property Address() As String

    Public Property Phone() As String

    Public Sub New(myFirstname As String, myLastname As String, myAddress As String, myPhone As String)
        Me.FirstName = myFirstname
        Me.LastName = myLastname
        Me.Address = myAddress
        Me.Phone = myPhone
    End Sub
End Class

我尝试过花车,内联盒和其他聪明的东西的各种用途,但我不能在我的生活中解决这个问题。

2 个答案:

答案 0 :(得分:1)

根据我的理解,这就是你想要的......

.container{
    text-align:center;  
}
.container>div{
    display:inline-block;
    vertical-align:top; 
}
.rightofcenter+.leftofcenter{
    display:block;  
}

http://jsfiddle.net/uzbs4Lax/

答案 1 :(得分:0)

喜欢这个吗?

.center {
  text-align: center;
}
<div class="container">
  <p class="center">
    Mr Firstname Surname
  </p>
  <p class="center">
    Address
  </p>
  <p class="center">
    Town, Postcode
  </p>
</div>