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.
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.
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.
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;}
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.