如何修复我的 div 位移对齐？

Question

我终于创建了我的聊天框（工作一周），但现在我的顶部聊天框和底部聊天框设置不正确？为什么是这样？我认为这与边距功能或填充有关！

body {
  background-color: #6B6B6B;
  background: url(http://wizzfree.com/pix/bg.jpg) fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: Arial;
  color: darkgrey;
  font-size: 14px;
  line-height: .3;
  letter-spacing: .5px;
  margin: 50px;
}


/*............... chatbox ...............*/

.chatbox {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 400px;
  margin-left: -250px;
  /* half width */
  border-radius: 0px 0px 30px 30px;
  background-color: rgba(0, 0, 0, .4);
}


/*... input message ...*/

input[type=text] {
  width: 230px;
  height: 40px;
  border: none;
  outline: none;
  padding-left: 30px;
  font-size: 14px;
  color: lightgrey;
  font-weight: bold;
  font-style: italic;
  letter-spacing: .5px;
  background-color: transparent;
}


/*... bubble containers ...*/

.bubble {
  position: absolute;
  max-width: 200px;
  padding: 10px;
  border-radius: 0px 20px 20px 20px;
  background-color: rgba(0, 0, 0, .3);
}

.bubble-r {
  position: absolute;
  max-width: 200px;
  padding: 10px;
  border-radius: 20px 0 20px 20px;
  background-color: rgba(0, 0, 0, .3);
}

.bubble>img {
  position: absolute;
  right: 100%;
  top: 0;
}

.bubble-r>img {
  position: absolute;
  left: 100%;
  top: 0;
  transform: scaleX(-1);
}

.chattext {
  font-family: Arial;
  color: grey;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .5px;
}

.right {
  right: 50px;
}


/*......... crossfade on buttons .........*/

.hover img {
  transition: .3s;
  position: absolute;
}

.nohover {
  opacity: 0;
}

a:hover .hover {
  opacity: 0;
}

a:hover .nohover {
  opacity: 1;
}

<div class="chatbox">
  <!-- emojis list -->
  <div style="background:#2f2f2f;height:42px;display:flex;">
    <a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
        style="margin-left:-20px;"></a>
    <!-- input message -->
    <form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
    <!-- send button -->
    <b style="margin-left:0px;size:16;line-height:2.9;color:dimgray;"><i>Typing...&nbsp;&nbsp;</i></b>
    <a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a>
  </div>

  <!--............... chatlines .................-->

  <div class="chatbox" style="height: 200px;padding-top: 15px;padding-left: 50px;overflow: hidden;">
    <div class="bubble-r right chattext"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
      <div><b>Yummi:</b> Thx your sooo sweet! 
      </div>
    </div>

    <div class="bubble chattext" style="margin-top: 45px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
      <div><b>You:</b> how are you do you find your cat? you are so lovely today. what u doing?
      </div>
    </div>

    <div class="bubble-r right chattext" style="margin-top: 120px;"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
      <div><b>Yummi:</b> cool. see u tomorrow...
      </div>
    </div>

    <div class="bubble chattext" style="margin-top: 180px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
      <div><b>You:</b> I trying calling soon ok... maybe later. I was super busy last night.
      </div>
    </div>
  </div>

  <!--...........................................-->

Answer 1

所做的更改是：

在chatboxclass中，将margin-left设置为-200px。
对于 chatbox 元素（具有内联 CSS），在内联 CSS.

margin-left: -225px

top: 42px

请注意，元素现在居中对齐。偏移量是因为元素中的 padding (chatbox 一个内联 CSS)

body {
  background-color: #6B6B6B;
  background: url(http://wizzfree.com/pix/bg.jpg) fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: Arial;
  color: darkgrey;
  font-size: 14px;
  line-height: .3;
  letter-spacing: .5px;
  margin: 50px;
}


/*............... chatbox ...............*/

.chatbox {
  position: absolute;
  top: 100px;
  left: 50%;
  width: 400px;
  margin-left: -200px;
  /* half width */
  border-radius: 0px 0px 30px 30px;
  background-color: rgba(0, 0, 0, .4);
}


/*... input message ...*/

input[type=text] {
  width: 230px;
  height: 40px;
  border: none;
  outline: none;
  padding-left: 30px;
  font-size: 14px;
  color: lightgrey;
  font-weight: bold;
  font-style: italic;
  letter-spacing: .5px;
  background-color: transparent;
}


/*... bubble containers ...*/

.bubble {
  position: absolute;
  max-width: 200px;
  padding: 10px;
  border-radius: 0px 20px 20px 20px;
  background-color: rgba(0, 0, 0, .3);
}

.bubble-r {
  position: absolute;
  max-width: 200px;
  padding: 10px;
  border-radius: 20px 0 20px 20px;
  background-color: rgba(0, 0, 0, .3);
}

.bubble>img {
  position: absolute;
  right: 100%;
  top: 0;
}

.bubble-r>img {
  position: absolute;
  left: 100%;
  top: 0;
  transform: scaleX(-1);
}

.chattext {
  font-family: Arial;
  color: grey;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .5px;
}

.right {
  right: 50px;
}


/*......... crossfade on buttons .........*/

.hover img {
  transition: .3s;
  position: absolute;
}

.nohover {
  opacity: 0;
}

a:hover .hover {
  opacity: 0;
}

a:hover .nohover {
  opacity: 1;
}

<div class="chatbox">
  <!-- emojis list -->
  <div style="background:#2f2f2f;height:42px;display:flex;">
    <a class="hover" href="emojis.htm"><img src="http://wizzfree.com/pix/smiley.png" width="33" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley2.png" width="33" class="nohover" style="margin-left:-20px;"><img src="http://wizzfree.com/pix/smiley.png" width="33" class="hover"
        style="margin-left:-20px;"></a>
    <!-- input message -->
    <form><input type="text" id="fname" name="fname" value="Type Your Message" onFocus="this.value=''"></form>
    <!-- send button -->
    <b style="margin-left:0px;size:16;line-height:2.9;color:dimgray;"><i>Typing...&nbsp;&nbsp;</i></b>
    <a class="hover" href="send.htm"><img src="http://wizzfree.com/pix/button6.png" width="90"><img src="http://wizzfree.com/pix/button7.png" width="90" class="nohover"><img src="http://wizzfree.com/pix/button6.png" width="90" class="hover"></a>
  </div>

  <!--............... chatlines .................-->

  <div class="chatbox" style="height: 200px;padding-top: 15px;padding-left: 50px;overflow: hidden; margin-left: -225px; top: 42px;">
    <div class="bubble-r right chattext"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
      <div><b>Yummi:</b> Thx your sooo sweet! 
      </div>
    </div>

    <div class="bubble chattext" style="margin-top: 45px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
      <div><b>You:</b> how are you do you find your cat? you are so lovely today. what u doing?
      </div>
    </div>

    <div class="bubble-r right chattext" style="margin-top: 120px;"><img src="http://wizzfree.com/pix/bubble1.png" width="12.6" />
      <div><b>Yummi:</b> cool. see u tomorrow...
      </div>
    </div>

    <div class="bubble chattext" style="margin-top: 180px;"><img src="http://wizzfree.com/pix/bubble1.png" width="13" />
      <div><b>You:</b> I trying calling soon ok... maybe later. I was super busy last night.
      </div>
    </div>
  </div>

  <!--...........................................-->

如果您需要任何解释，请告诉我。

如何修复我的 div 位移对齐？

How to fix my div displacement into alignment?

html

css

alignment

vertical-alignment

divide