如何在div的左侧添加加号

Question

I'm having some div and trying to add a plus character at the left side of the div after a h3 element. I've managed to add the plus with span but it won't go to the left side, it stays centered..

 .wrapper { position: absolute; top: 0; left: 0; width: 100%; } .chatter { margin-top:5px; width:70%; border-spacing:5px; table-layout: fixed; empty-cells:show; border-collapse:separate; font:78%/130% "Arial", "Helvetica", sans-serif; border:1px solid gray; box-shadow:0px -1px 2px 1px #d2d6d8; border-top:1px solid #eee; border-right:1px solid #d2d5d7; border-left:1px solid #d2d5d7; border-bottom:1px solid #d2d5d7; border-radius:3px; font-size:large; } .c_head { box-shadow:0px -1px 2px 1px #d2d6d8; border-top:1px solid #eee; border-right:1px solid #d2d5d7; border-left:1px solid #d2d5d7; border-bottom:1px solid #d2d5d7; padding-right:9px; height:31px; overflow:hidden; margin-bottom:1px; border-radius:3px; } .c_header { margin:0; padding:0; padding-left:9px; color:#777777; overflow:hidden; height:31px; line-height:31px; font-size:1.2em; font-weight:bold; padding-bottom:3px; } 

 <div class="wrapper" style="height:100%; background-color:Silver;"> <center> <div class="chatter" runat="server"> <div class="c_head"> <h3 class="c_header">Chat - BETA<span style="text-align:left; padding-left:0; position:relative; left:0;">+</span></h3> </div> </div> </center> </div> 

How can I possibly set it so it aligns to the left in the div ? I've tried anything by now.

Answer 1

You could achieve that by positioning the <span> element absolute ly and give a position of relative to the <div> to establish a containing block for the absolutely positioned element.

Then you could play with left or other offsets to move the element to the right position.

 .wrapper { position: absolute; top: 0; left: 0; width: 100%; } .chatter { margin-top:5px; width:70%; border-spacing:5px; table-layout: fixed; empty-cells:show; border-collapse:separate; font:78%/130% "Arial", "Helvetica", sans-serif; border:1px solid gray; box-shadow:0px -1px 2px 1px #d2d6d8; border-top:1px solid #eee; border-right:1px solid #d2d5d7; border-left:1px solid #d2d5d7; border-bottom:1px solid #d2d5d7; border-radius:3px; font-size:large; margin-left: auto; /* <-- Added declarations */ margin-right: auto; /* instead of <center> */ text-align: center; /* dropped element. */ } .c_head { box-shadow:0px -1px 2px 1px #d2d6d8; border-top:1px solid #eee; border-right:1px solid #d2d5d7; border-left:1px solid #d2d5d7; border-bottom:1px solid #d2d5d7; padding-right:9px; height:31px; overflow:hidden; margin-bottom:1px; border-radius:3px; position: relative; /* <-- Added declaration */ } .c_header { margin:0; padding:0; padding-left:9px; color:#777777; overflow:hidden; height:31px; line-height:31px; font-size:1.2em; font-weight:bold; padding-bottom:3px; } .c_header > span { position:absolute; /* <-- Edited declaration */ left:0; } 

 <div class="wrapper" style="height:100%; background-color:Silver;"> <div class="chatter" runat="server"> <div class="c_head"> <h3 class="c_header">Chat - BETA<span>+</span></h3> </div> </div> </div> 

---

As a side-note: <center> element has been deprecated since HTML 4 and removed since HTML 5 — But some web browsers still support it. Therefore it shouldn't be used for new projects.

Instead, in order to align block-level elements at the center you could set the left and right margin of the element to auto . And for inline-level elements, you could set text-align: center on the parent element.

Answer 2

I think you can just float it left? You might also then want to clear the float on the enclosing container.

.group:after {
  content: "";
  display: table;
  clear: both;
}
...
<div class="c_head group">
  <h3 class="c_header">Chat - BETA<span style="float:left; padding-left:0; position:relative; left:0;">+</span></h3>
</div>

Depends on which browsers you are supporting.

Answer 3

something like this?

HTML

<div class="wrapper" style="height:100%; background-color:Silver;">
    <center>
        <div class="chatter" runat="server">
            <div class="c_head">
                <div class="plus"> <h3> +     </h3> </div>
                <div class="c_header"> <h3>Chat - BETA</h3> </div>
            </div>
        </div>
    </center>
</div>

CSS

.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.chatter
{
   margin-top:5px;
   width:70%;
   border-spacing:5px;
   table-layout: fixed;
   empty-cells:show;
   border-collapse:separate;
   font:78%/130% "Arial", "Helvetica", sans-serif;
   border:1px solid gray;
   box-shadow:0px -1px 2px 1px #d2d6d8;
    border-top:1px solid #eee;
    border-right:1px solid #d2d5d7;
    border-left:1px solid #d2d5d7;
    border-bottom:1px solid #d2d5d7;
   border-radius:3px;
   font-size:large;
}
.c_head
{
    box-shadow:0px -1px 2px 1px #d2d6d8;
    border-top:1px solid #eee;
    border-right:1px solid #d2d5d7;
    border-left:1px solid #d2d5d7;
    border-bottom:1px solid #d2d5d7;
    border-radius:3px;
}
.c_header
{
    width:70%;
    color:#777777;
    height:100%;
    font-size:1.2em;
    font-weight:bold;
}

.plus {width:30%; height:100%; float:left; font-size:31px;}

http://jsfiddle.net/ockzukjs/

Answer 4

Remove the inline styles to the h3 in the HTML

 .wrapper { position: absolute; top: 0; left: 0; width: 100%; } .chatter { margin-top: 5px; width: 70%; border-spacing: 5px; table-layout: fixed; empty-cells: show; border-collapse: separate; font: 78%/130%"Arial", "Helvetica", sans-serif; border: 1px solid gray; box-shadow: 0px -1px 2px 1px #d2d6d8; border-top: 1px solid #eee; border-right: 1px solid #d2d5d7; border-left: 1px solid #d2d5d7; border-bottom: 1px solid #d2d5d7; border-radius: 3px; font-size: large; } .c_head { box-shadow: 0px -1px 2px 1px #d2d6d8; border-top: 1px solid #eee; border-right: 1px solid #d2d5d7; border-left: 1px solid #d2d5d7; border-bottom: 1px solid #d2d5d7; padding-right: 9px; height: 31px; overflow: hidden; margin-bottom: 1px; border-radius: 3px; } .c_header { margin: 0; padding: 0; padding-left: 9px; color: #777777; overflow: hidden; height: 31px; line-height: 31px; font-size: 1.2em; font-weight: bold; padding-bottom: 3px; position: relative; } .c_header:before { content: "+"; position: absolute; left: 0; } .c_header:after { content: "+"; position: absolute; right: 0; } 

 <div class="wrapper" style="height:100%; background-color:Silver;"> <center> <div class="chatter" runat="server"> <div class="c_head"> <h3 class="c_header">Chat - BETA</h3> </div> </div> </center> </div> 

What I did:

Changed this line of HTML

<h3 class="c_header">Chat - BETA</h3>

add this to CSS

    .c_header
    {
        margin:0;
        padding:0;
        padding-left:9px;
        color:#777777;
        overflow:hidden;
        height:31px;
        line-height:31px;
        font-size:1.2em;
        font-weight:bold;
        padding-bottom:3px;
        position: relative;
    }
    .c_header:before {
      content:"+";
      position: absolute;
      left:0;
    }
    .c_header:after {
      content:"+";
      position: absolute;
      right:0;
    }