I'm trying to center some text in a div horizontally.
CSS:
#parent {
background-color: #eee;
height: 48px;
text-align: center;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
float: left;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
float: right;
}
HTML:
<div id="parent" style="width:100%">
<div id="colLeft">left left left left</div>
Title
<div id="colRight">right</div>
</div>
<div style="width:100%; text-align:center">
Title - this one is really centered.
</div>
But it the text "Title" appears to get centered taking into account the space that #colLeft consumes, so it's not really centered with respect to the browser width.
Is there a way that I can truly center the text, no matter how much space #colLeft takes up?
It's not really recommended, but you could do something like this JS Fiddle.
#parent {
background-color: #eee;
height: 48px;
text-align: center;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
float: left;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
float: right;
}
.title{
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
}
<div id="parent" style="width:100%">
<div id="colLeft">left left left left</div>
<div class="title">Title</div>
<div id="colRight">right</div>
</div>
<div style="width:100%; text-align:center">Title - this one is really centered.</div>
You make the title position:absolute. Give it a width. left: 50%. margin-left: minus half of the width. It will stay center. But I wouldn't really recommend doing this...
if you surround Title with a div like this:
<div style="position: absolute;left: 50%">Title</div>
You're good in Webkit.
<div align="left" style="border:5px solid white; text-align:center; position:relative">
<div align="left" style="border:4px solid brown; float:left; width:100px; position:absolute"><span>left</span></div>
<div align="left" style="border:4px solid brown; right:0; width:200px; position:absolute"><span>right</span></div>
<span>really centered</span></div>
Related
.left {
width: 50%;
display: inline-block;
float: left;
}
/* Second user block */
.right {
border-color: lightskyblue;
background-color: darkcyan;
width: 50%;
display: inline-block;
float: right;
}
These are the css for the wrappers, not sure why it does not work still.
.boxed {
border: 2px solid black;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
background-color: darkgoldenrod;
max-width:800px;
margin:1rem auto;
overflow:hidden;
}
/* Chat blocks */
.block {
border: 2px solid darkgreen;
background-color: lightgreen;
border-radius: 30px;
padding: 10px;
margin: 10px 0;
border-radius:20px;
margin-bottom:10px;
width:60%;
}
I am making a mock UI and I can't seem to get the blue chat bubbles to the right side, I tried using right: 0px; and float: right; but both don't seem to work. Are there any other css tags I can use position it correctly?
Here are the div tags:
<div class="boxed card my-3">
<h2 align="center">Chat Log:</h2>
<div class="block left">
<img src="User1.jpg" alt="FortniteGamer">
<p>Hey whats up?. Do you want to get a game going?</p>
<span class="time-right">11:00</span>
</div>
<div class="block right">
<img src="User2.jpg" alt="CODGamer" class="right">
<p>Hey! Yeah defintely that sounds fun!</p>
<span class="time-left">11:01</span>
</div>
<div class="block left">
<img src="User1.jpg" alt="FortniteGamer">
<p>Sweet! Whats your username on fornite?</p>
<span class="time-right">11:02</span>
</div>
<div class="block right">
<img src="User2.jpg" alt="CODGamer" class="right">
<p>My username is: CODSav</p>
<span class="time-left">11:02</span>
</div>
</div>
It seems that the wrapper (.card) is a flex container, in which case floats wont have any effect.
Instead, set the opposite margin to auto:
.right {
border-color: lightskyblue;
background-color: darkcyan;
width: 50%;
margin-left:auto;
}
Put position:absolute and try:
.right {
position:absolute;
border-color: lightskyblue;
background-color: darkcyan;
width: 50%;
display: inline-block;
float: right;
}
I am trying to align 3 boxes and 2 images.
2 boxes vertically with there is an img between
3rd box standing right of them with an arrow img pointing it like this:
Example box css:
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;
}
Use flexbox and divide to 3 section(3 divs) inside the wrap div
.wrap{
display:flex;
}
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;
}
.img1 img{
width: 80px;
height: 150px;
}
.part2 img{
width: 150px;
height: 80px;
}
.part2,.part3{
margin-top: 100px;
}
.part3 .box{
margin-left: 40px;
}
<div class="wrap">
<div class="part1">
<div class="box">
</div>
<div class="img1">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
<div class="box">
</div>
</div>
<div class="part2">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
<div class="part3">
<div class="box">
</div>
</div>
</div>
If you have constant number of elements. (3 boxes and 2 images with fixed width and height), you can create wrapper box with relative position, then add position absolute to child nodes and write needed positions. for example:
.wrapper {
width: 100%;
box-sizing: border-box;
position: relative;
}
.child-arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can use flexbox to position your boxes by rows and columns.
#cont1 {
display:flex;
flex-direction:row;
}
.box{
width: 80px;
height: 80px;
background: #8C8C8C;
border: solid 3px #8B0000;
}
<div>
<div class="box">Box 2
</div>
<div id="cont1">
<div> IMG1 </div>
<div> IMG2 </div>
<div class="box">Box 3</div>
</div>
<div class="box">
Box 1
</div>
</div>
You should try to use the float/clear attribute:
.box1{
float: left;
}
.box2{
float: right;
}
.image{
float: left;
}
.box3{
float: left;
}
Afterwards just use position: relative within your classes fix the positioning.
I have a div with a height en width of 33.33%. I want text in the middle of the div.
HTML
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
</div>
CSS
#blog1 {
width: 33.33%;
padding-bottom: 33.33%;
background: red;
float: left;
}
How can i make this?
I suggest this:
html
<div class="blogs" id="content">
<div id="blog1">text in the middle
<span>blog 1</span>
</div>
<div id="blog2"><span>blog 2</span></div>
<div id="blog3"><span>blog 3</span></div>
</div>
css
#blog1{
width: 33.33%;
/*padding-bottom: 33.33%;*/
background: red;
text-align: center;
display:table-cell;
vertical-align:middle;
position: relative;
}
.blogs > div > span{
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
}
#blog2{
width: 33.33%;
padding-bottom: 33.33%;
background: green;
text-align: center;
display:table-cell;
position: relative;
}
#blog3{
width: 33.33%;
padding-bottom: 33.33%;
background: blue;
text-align: center;
display:table-cell;
position: relative;
}
#content{
display:table;
}
fiddle
And another example with static width e.g. 500px fiddle
Have a look at this fiddle.
Just set height and line-height equal and add vertical-align:middle;
Your code will look like this:
#blog1{
width: 33.33%;
height:300px;
background: red;
float: left;
text-align:center;
vertical-align:middle;
line-height:300px; /* has to bee the same value as the height of the div */
}
<div class="blogs" id="content">
<div id="blog1">tests</div>
<div id="blog2"></div>
<div id="blog3"></div>
<!-- You need to add this after the last <div> -->
<div style="clear:right;"></div>
</div>
#blog1, #blog2, #blog3 {
float:left;
padding: 3% 0;
background: red;
width: 100px;
height:100%;
text-align:center;
}
JS Fiddle
I'm hoping there's a way to do this without JavaScript. I have two elements displayed with inline-block. They are both 200 pixels in width and height, so they both appear on the same line unless the browser is sized very small (or with mobile browsers). I want there to be a 50px space between the two elements, so on the second element I added "margin-left: 50px", which works fine. When the browser is resized to a size where both elements cannot fit on the same line, the second element wraps to the next line, which is what I want it to do. The problem is that the second element still has the 50px left margin, so the elements don't appear centered. I could add JavaScript to detect when the container height changes (i.e. the element wrapped to the next line) and remove the left margin, but is there a way to accomplish this without JavaScript?
Here's my code, simplified:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/YRshx/
Based on bastianonm's solution, try this:
<div id="wrapper" style="text-align: center; margin:0 -25px;">
<div id="elem1" style="display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
<div id="elem2" style="display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
</div>
http://jsfiddle.net/YRshx/6/
Here;s a different approach to the problem. It exploits the fact that spaces are discarded if they are at the start or end of a line. So it uses a space to separate the blocks.
Fidlle: http://jsfiddle.net/xKVG3/
<div id="wrapper">
<div><div id="elem1"></div></div>
<div><div id="elem2"></div></div>
</div>
#wrapper { text-align:center; }
#wrapper > div > div {
display: inline-block;
width: 200px;
height: 200px;
vertical-align:top;
}
#elem1 {
background-color: #f00;
}
#elem2 {
background-color: #00f;
}
#wrapper > div {
display:inline;
}
#wrapper > div:after {
content: ' ';
font-size:12.5em;
line-height:0px;
}
#wrapper { text-align:center; }
#wrapper > div > div {
display: inline-block;
width: 200px;
height: 200px;
vertical-align:top;
}
#elem1 {
background-color: #f00;
}
#elem2 {
background-color: #00f;
}
#wrapper > div {
display:inline;
}
#wrapper > div:after {
content: ' ';
font-size:12.5em;
line-height:0px;
}
#wrapper {
border:2px solid black;
animation: 4s linear 0s infinite alternate wide;
}
#keyframes wide {
from { width: 490px; }
to { width: 430px; }
}
<div id="wrapper">
<div><div id="elem1"></div></div>
<div><div id="elem2"></div></div>
</div>
You could do something similar to:
#media screen and (max-width: 453px){
#elem2 { margin-left:0 !important; }
}
http://jsfiddle.net/YRshx/3/
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="float:left; display: inline-block; background-color: #f00; width: 200px; height: 200px; margin:0 25px;"></div>
<div id="elem2" style="float:left; display: inline-block; background-color: #00f; width: 200px; height: 200px; margin:0 25px;"></div>
</div>
Working jsFiddle Demo
Try to add margin to both left and right, and to your both elements:
<div id="wrapper" style="text-align: center;">
<div id="elem1" style="margin: 0 25px; display: inline-block; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="margin: 0 25px; display: inline-block; background-color: #00f; width: 200px; height: 200px;"></div>
</div>
However based on your real layout, this trick maybe won't work, or need more things.
Just keep the inline container in a inline div and float them...
Code:-
<div id="wrapper" style="text-align: center;">
<div id="outer" style="display: inline-block;">
<div id="elem1" style="float:left; background-color: #f00; width: 200px; height: 200px;"></div>
<div id="elem2" style="float:left; background-color: #00f; width: 200px; height: 200px; margin-left: 50px;"></div>
</div>
</div>
Demo:- http://jsfiddle.net/YRshx/2/
Thanks...
If you have more elements inside one container and wrap them evenly use below code it will work perfect.
I am using UL, LI and minimal css
https://jsfiddle.net/mkpasala/ayw8szcn/
<h1>Wrap children evenly</h1>
<ul class="skillscont-list">
<li>TestSkill</li>
<li>TestSkill1</li>
<li>TestSkill2</li>
<li>Test - Skill</li>
<li>Chat-Skill</li>
<li>testing disposition</li>
<li>Narender</li>
<li>Inya</li>
<li>Chat_Inya</li>
<li>Agent1</li>
<li>agenttwo</li>
<li>mahender</li>
<li>naresh</li>
<li>venkat-skill</li>
<li>English</li>
<li>French</li>
<li>testpoc</li>
<li>mahender1</li>
<li>devskill</li>
<li>praveen</li>
</ul>
.skillscont-list{
margin: 0px;
padding: 0px;
overflow: overlay;
list-style-type:none;
}
.skillscont-list li{
border:1px solid black;
float: left;
widht: auto;
padding: 5px 10px;
margin: 5px;
color:white;
font-weight:bold;
background-color:gray;
}
How do I do this in widths? The gray middle div is 100% - 50px - 50px. Please show code; below this image is my guess
EXAMPLE : (http://mediahood.net/mesgr.png)
<div style="position:absolute;left:0px;width:50px;height:50px;">
<div style="width:50;height:50px;background-color:#000;margin:0px;">
<img id='txtrattach' src="/assets/txtr-attach.png" height='50px'></div>
</div>
<div style="position:absolute;left:50px;width:258px;height:50px;font-family:'Harabara';font-size:12px;">
<input id="txtrinput" type="text" name='message' onKeyPress='return charLimit(this)' onKeyUp='return characterCount(this)'>
</div>
<div style="position:absolute;right:0px;width:50px;height:50px;">
<div style="width:50px;height:50px;background-color:#000;margin:0px;">
<span id='charCount'>150</span><span id='charCount2'> chars.</span>
<input id='txtrsend' src="/assets/txtr-enter.png" height='50px' name="send" type="image" value="Send">
</div>
</div>
</dov>
I have two examples. The first uses a fixed height for the footer as a whole, and floats for the sides. The second uses a variable height footer (based on the "middle" div's content), using a trick that sets the background of the footer to black and the middle part to grey and margins to reveal the background for the rest of the area that the variable-height sides do not extend to (there would be grey underneath the text if not for the margins).
<div id="footer">
<div id="left">50px</div>
<div id="right">50px</div>
<div id="middle">100%</div>
</div>
<div>2:</div>
<div id="footer2">
<div id="left2">50px</div>
<div id="right2">50px</div>
<div id="middle2">100%<br />100%<br />100%</div>
</div>
CSS:
#footer {
height: 115px;
text-align: center;
background: #ccc;
}
#left {
float: left;
height: 100%;
background: #000;
color: #fff;
text-align: center;
width: 50px;
}
#right {
float: right;
height: 100%;
background: #000;
color: #fff;
text-align: center;
width: 50px;
}
#footer2 {
text-align: center;
background: #000;
}
#left2 {
height: 100%;
float: left;
color: #fff;
text-align: center;
width: 50px;
}
#right2 {
float: right;
color: #fff;
text-align: center;
width: 50px;
height: 100%;
}
#middle2 {
margin: 0 50px;
background: #ccc;
}
What about setting margin on inner div?
Just showing style tags for convenience, move to css file.
<style>
.outer {
width: 400px;
background-color: #ddd;
}
.inner {
margin: 0 50px;
background-color: #ccc;
}
</style>
<div class="outer">
<div class="inner">
inner div
</div>
</div>