div类中图像的绝对定位

时间:2016-10-31 13:02:55

标签: html css css3

我们有以下div结构,我们希望在容器div中水平居中图像和文本。但是,图像左对齐,只有标题居中。您可以在下面找到代码:

Private Sub BtnFind_Click(sender As Object, e As EventArgs) Handles BtnFind.Click
    Dim cmd As OleDbCommand
    Dim myConnection As OleDbConnection
    Dim text As String = txtTeacherID.Text
    Dim dataReader As OleDbDataReader

    Try
        'selects the information from the row where the column has the teacher ID
        myConnection = New OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=C:\My Documents\database.accdb")
        myConnection.Open()

        cmd = New OleDbCommand("SELECT * FROM [TMessages] WHERE TeacherID = '" & text & "'", myConnection)

        dataReader = cmd.ExecuteReader

        While dataReader.Read()
            lstItems.Items.Add(dataReader(0))
            lstItems.Items.Add(dataReader(0))
            lstItems.Items.Add(dataReader(0))
            MsgBox("reading")
        End While
    Catch
        MsgBox("Error occured")
    End Try
    dataReader.Close()
    myConnection.Close()
End Sub
.QHeader {
  position: absolute;
  margin-top: 96px;
  margin-left: 0px;
  width: 800px;
  height: 415px;
  background-image: url('../img/bg_blue_rect.png');
  background-repeat: no-repeat;
  background-position: left top;
}
#QHeaderImg01 {
  position: absolute;
  display: block;
  margin: 0 auto;
  margin-top: 72px;
  width: 263px;
  height: 221px;
  background-color: #0F0;
}
.QHeaderTitle {
  position: absolute;
  margin-top: 324px;
  margin-left: 0;
  width: 800px;
  height: auto;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #000;
}

3 个答案:

答案 0 :(得分:1)

只需更改

Set rng = Range("AI:AI")

Set origCell = rng.Find(2516)
Set currCell = origCell

Do
    Set currCell = rng.FindNext(currCell)

    If shtMaster.Range("H" & currCell.Row).Value = "37A" Then
        boolMatchingPair = True
        Exit Do
    End If
Loop While currCell.Row <> origCell.Row

If boolMatchingPair = True
    'found match
Else
    'no match

#QHeaderImg01 {
    position:absolute;
}

和cource,删除大边缘

答案 1 :(得分:1)

只需移除position: absolute;或将其更改为position: relative;,因为您不需要绝对定位来水平居中元素:

&#13;
&#13;
.QHeader {
  width: 800px;
  height: 415px;
  background-image: url(http://placehold.it/800x415);
  background-repeat: no-repeat;
  background-position: left top;
}
#QHeaderImg01 {
  display: block;
  margin: 0 auto;
  width: 263px;
  height: 221px;
  background-color: #0F0;
}
.QHeaderTitle {
  margin-top: 50px;
  width: 800px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #000;
}
&#13;
<div class="QHeader">
  <img id="QHeaderImg01" src="http://placehold.it/263x221/0c0" />

  <div class="QHeaderTitle">
    TITLE
  </div>
  <!--QHeaderTitle-->

</div>
<!--QHeader-->
&#13;
&#13;
&#13;

答案 2 :(得分:0)

&#13;
&#13;
div.container {
    height: 10em;
    position: relative }
div.container p {
    margin: 0;
   
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	 }
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
	}
&#13;
<body>
<div class=container>
<IMG class="displayed" src="http://labs.qnimate.com/slider/1.jpg" alt="...">
  <p>Centered!
</div>
&#13;
&#13;
&#13;

&#13;
&#13;
IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
	}	

div.container {
    height: 10em;
    position: relative }
div.container p {
    margin: 0;
   
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
	 }
&#13;
<IMG class="displayed" src="http://labs.qnimate.com/slider/1.jpg" alt="...">
<div class=container>
  <p>Centered!
</div>
&#13;
&#13;
&#13;