I am trying to acomplish something that should be easy: centering an a tag inside a div. I know this is a classic, that there are similar questions out there, and also that can be done with flexbox, but I am trying to avoid the latter.
.wrapper {
background-color: gold;
height: 200px;
width: 100%;
position: relative;
text-align: center;
vertical-align: middle;
}
a {
border: 4px dashed white;
height: 95%;
width: 95%;
display: block;
box-sizing: border-box;
}
<div class="wrapper">
<a>
Link
</a>
</div>
Any help will be welcome!
EDIT: I would like the a tag to be flexible and fill the wrapper, without knowing the height of the wrapper.
Add line-height in wrapper div
.wrapper {
background-color: gold;
height: 200px;
width: 100%;
line-height:200px;
position: relative;
text-align: center;
vertical-align: middle;
}
a {
border: 4px dashed white;
height: 95%;
width: 95%;
display: block;
box-sizing: border-box;
}
<div class="wrapper">
<a>
Link
</a>
</div>
Related
So I'm questioning myself why the div with the class champ_info isn't placed next to the image because the image is an inline-block element. So the Text in my div element lies under the image instead of next to the image. My code is below.
.champ_info {
background: #0b2e33;
color: white;
}
.champ_container {
background: #10474e;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
Thank you in advance.
I personally find making inherently block level elements inline counter intuitive. Flex box is the perfect solution to your problem.
.champ_container {
width: 40%;
margin: 0 auto;
display: flex;
/* justify-content: center; */
align-items: center;
background: #10474e;
}
.champ_info {
background: #0b2e33;
color: white;
width: 100%;
height: 100%;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
<div> is a block element, which means it takes up the whole line. Put display: inline; inside the css for the <div> and it places it next to the image like you wanted.
Add vertical-align: top; if you want the text to align to the top. Since the image and the text align to the bottom of the parent, you need to manually set them to align to the top.
.champ_info {
background: #0b2e33;
color: white;
display: inline;
vertical-align: top;
}
.champ_container {
background: #10474e;
}
.champ_img {
border: 3px solid #1ba9bd;
border-radius: 50%;
margin: 5px;
height: 5rem;
width: auto;
}
<div class="champ_container">
<img class="champ_img" src="https://ddragon.leagueoflegends.com/cdn/9.5.1/img/champion/Pyke.png">
<div class="champ_info">
Some Text
</div>
</div>
I have a questions about centering multiple absolute div horizontally. I have a parent div that i s relative that contain four child divs. I want them to center evenly. Is there a way to center the four divs then add once? Or must I position them one by one? What I have now is when I position the divs absolute. They stack on top of each other, when they are centered.
Thank you for your time.
You can define a div for your sub divs and use display: flex.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
boxes {
margin-top: 25px;
width: 100%;
position: relative;
text-align: center;
}
.eq {
display: flex;
}
.box {
width: 300px;
max-height: 400px;
min-height: 233px;
padding: 15px;
border: 1px solid #e6e6e6;
overflow-wrap: break-word;
background-color: #fff;
margin-right: 20px;
;
}
<div class="boxes">
<div class="box">
<h3>MyBMW Login</h3>
<form class="" action="index.html" method="post">
<input type="text" name="email" placeholder="Emailadres">
<input type="password" name="password" placeholder="Wachtwoord">
</form>
</div>
<div class="eq">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
</div>
</div>
However I had to delete position: absolute. If it's not what you want, please give us more details.
Change your css to this, worked for me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.boxes {
position: absolute;
background-color: #000;
display: flex;
margin-top: 25px;
width: 100%;
text-align: center;
}
.box {
position: relative;
width: 300px;
max-height: 400px;
min-height: 233px;
padding: 15px;
border: 1px solid #e6e6e6;
overflow-wrap: break-word;
background-color: #fff;
margin-right: 20px;
}
i wouldn't make this as absolute, these .box divs need to be relative, you can make the .boxes a "position absolute".
https://jsfiddle.net/DamianToczek/3w50gj28/4/
Make the .boxes absolute, the ID .box cant be absolute you always make a container that is absolute. If you want to make .box absolute, you need to give them another id like .box1 .box2 .box3, the best option is always a container that holds the "centered" items, the container is .boxes for you:
.boxes {
width:100%;
position:absolute;
}
Basically, I am trying to put two circles next to each other (instead of on top)inside of a container.
However, there's a space between them and I want to get rid of it. How can I put two (or more) circles together?
https://jsfiddle.net/hLsu9qj0/
<div class="container">
<div class="circle">
circle 1
</div>
<div class="circle">
circle 2
</div>
</div>
css:
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
margin: 0 auto;
display: inline;
}
thanks everyone for your help!!!
It looks like all you're missing in your CSS is a float: left on the .container .circle { rule
UPDATED
One potential solution to the centering question (from comments) might be to make the .container div the size of the circles and center that
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
width: 100px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
float: left;
}
Or, as someone else suggested use display: inline-block and then set text-align: center on the .container
.container {
position: relative;
margin: 0 auto;
line-height: 50px;
text-align: center;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 auto;
}
Try adding float to .container .circle
float:left
check this https://jsfiddle.net/hLsu9qj0/2/
Use display: inline-block; instead of display: block;.
And give margin: 0 5px; to .container .circle to give space between.
You can use float:left also.
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: inline-block;
margin: 0 5px;
}
Updated Fiddle
UPDATED : JsFiddle
OPTIONAL :
This is for overlapping of two circle.Take a look in JsFiddle
Second Way : Link
HTML:
<div class="container">
<div class="circle">circle 1</div>
<div class="circle">circle 2</div>
</div>
CSS:
.container {
position: relative;
width: 95%;
margin: 0 auto;
line-height: 50px;
}
.container .circle {
height: 50px;
width: 50px;
background-color: blue;
border-radius: 50%;
text-align: center;
display: block;
margin: 0 auto;
margin-left:5px;
float:left;
}
Use float left in circle div
.container .circle {float:left;}
checkit out this http://jsfiddle.net/hLsu9qj0/9/
You should simply add the float:left; to the circle class. To guarantee also a good alignment, I suggest fixing the width and height of the container and set: height:100% to the circle, check the link:
//jsfiddle.net/hLsu9qj0/
you can use inside the container 2 div
<div class="container">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
put your code inside the 2 div column it defiantly works bootstrap but you need bootstrap css link inside your .html page
If you want to center them, change width of .container to .container {
clear: both;
overflow: hidden;
width: 23%;}
I am trying to display a list of images (equal height) in a horizontally scrolling div. This much works, but when I want to have a fixed image - a "cover" image present leftmost inside container the layout gets screwed up.
Below is the CSS and HTML of my work. If you run the snippet you can see that the list jumps to next line, instead of staying adjacent to "cover" image and scrolling horizantally. Here is the jsfiddle - http://jsfiddle.net/6x66dLdy/
I can solve it using javascript by setting width of #list programmatically, but I want to do it with CSS alone if possible.
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
display: inline-block;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
<div id="container">
<div id="cover">
<img src="http://placehold.it/160x100"/>
</div>
<div id="list">
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/60x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
<div class="item">
<img src="http://placehold.it/120x80"/>
</div>
</div>
</div>
This happening because you don't have widths specified. You have to provide widths for both of your inner divs and also to the container. Giving explicit width to container is advisable because you can then safely assign percent widths to children.
In you use-case, you have to calculate how much width is safer for your div#cover and then use the CSS calc to calculate the remainder of the width to assign to the list. Also, remember to account for the margins you have.
Relevant CSS:
width: calc(100% - 240px);
Your fiddle: http://jsfiddle.net/abhitalks/6x66dLdy/1
It is always better to specify a proper box-sizing. So include this at the top of your CSS:
* { box-sizing: border-box; }
.
Float the #cover left and remove the display: inline-block from #list.
This will allow the cover image and images in the list be any unknown width. Setting a fixed width on the containers like the other answers would not allow this.
Fiddle: http://jsfiddle.net/6x66dLdy/4/
#container {
height: 120px;
background: #ccccff;
}
#cover {
height: 100px;
margin: 10px;
float: left;
vertical-align: top;
position: relative;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
test this
http://jsfiddle.net/6x66dLdy/3/
#container {
height: 120px;
background: #ccccff;
width:1000px;
}
#cover {
height: 100px;
margin: 10px;
display: inline-block;
vertical-align: top;
position: relative;
width:200px;
float:left;
}
#cover img {
border: 2px solid #cc0000;
}
#list {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100px;
margin: 10px 0;
width:600px;
float:left
}
.item {
height: 80px;
margin: 10px 5px;
display: inline-block;
}
To answer your question you can specify min-width:800px; for the id #container
so it does not jump down and stay beside the main picture
here is an example http://jsfiddle.net/6x66dLdy/5/
I have the table, inside the table I have another box , I am struggling to align the box in center of the table.
My CSS code is
Inside box code
.inside_box{
border: medium solid;
display: table-cell;
float: none;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
text-align: center;
vertical-align: middle;
width: 300px;
}
Outside table CSS:
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
How to align the inside box in center?
I assume that your HTML is something like this
<div class="outer_table">
<div class="inside_box">hello world</div>
</div>
So, you are using display: table-cell; for .inside_box and margin: auto; won't work, as it's a table cell now, so what you can do is, wrap a div around hello world text, like this
Demo
<div class="outer_table">
<div class="inside_box"><div>hello world</div></div>
</div>
And use CSS like
.inside_box {
border: medium solid;
display: table;
font-family: Helvetica-bold;
font-size: 20.19px;
height: 100px;
margin: auto;
width: 300px;
}
.outer_table {
border: 1px solid black;
border-radius: 5px;
color: #1A6DAC;
font-size: 24px;
left: 40px;
padding: 20px;
position: absolute;
top: 260px;
width: 740px;
}
.inside_box > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Make sure you port the text-align: center; and vertical-align: middle; properties from .inside_box to .inside_box > div selector block.
Note: You won't need float: none;, not sure why you are using that.
As I got a comment, that what if you do not want to add an extra div element, so think like that you are using td without a table tag. So there is no way for that div with display: table-cell; to respect margin: auto;.
From Mozilla Developer Network :
Try to change and make your css like this:
.outer_table td {
text-align: center; // Align center
}
.inside_box {
float: none; // if you set float left or right your box will move right there
margin: 0px auto; // this setting for balancing margin left and right
}
<table class="outer_table">
<tr><td><div class="inside_box">Hellow wolrd!</div></td></tr>
</table>