This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 28 days ago.
I know this question has been asked hundreds of times, but for some reason I cant get it to work.
Both my HTML and CSS is rather simple, but I cant seem to center the div (livechat-wrapper) horizontally.
I just want the div to be as wide as the textarea, and placed just above the textarea, but it is "stuck" to the left side of my view.
Any ideas on how to do this?
<body >
<div class="livechat-wrapper">
</div>
<form>
<textarea maxlength="400" rows="1"id="input_field" class="input_field" type="text" name="q" placeholder="Write a message..."></textarea>
</form>
</body>
* {
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
html, body {
background: linear-gradient(to bottom right, #FDFCFB, #E2D1C3);
/*linear-gradient(to bottom right, #FDABDD, #374A5A);*/
width: 800px;
height: 600px
}
form {
display: flex;
flex-direction: row;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 10px;
}
.input_field {
background: rgba(255, 255, 255, 0.4);
border-radius: 10px;
width: 90%;
border: none;
padding: 1.2em;
outline: none;
font-weight: 400;
box-shadow: 1px 1px 1px black, -0.5px -0.5px white;
border: none;
resize: none;
outline: none;
}
.livechat-wrapper {
background: rgba(255, 255, 255, 0.4);
box-shadow: 1px 1px 1px black, -0.5px -0.5px white;
height: 80%;
width: 90%;
border-radius: 10px;
border: 0.05em solid red;
display: flex;
flex-direction: row;
justify-content: center;
}
I tried using on the div, but with no luck
display: flex;
flex-direction: row;
justify-content: center;
There are several ways to center a div horizontally using CSS. Here are a few examples:
Using margin: auto:
div {
width: 50%; /* or any other width */
margin: 0 auto;
}
This method works by setting the left and right margins to auto, which will push the div to the center of the parent element.
Using Flexbox:
div {
display: flex;
justify-content: center;
}
This method works by using the justify-content property to center the div within the parent element
Using Grid:
div {
display: grid;
place-items: center;
}
This method works by using the place-items property to center the div within the parent element.
Using transform: translate:
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
The body has a width of 800px however that doesn't affect the form due to absolute positioning. So you will want to remove the width on the body. Also the div is limited to 90% width. So you can either change that to 100% and add box-sizing: border-box; to correct for margins or add margin: auto; which should center it on the page.
Try adding this to the your CSS
body {
display: flex;
justify-content: center;
width: 800px;
}
.livechat-wrapper {
margin: auto;
width: 90%;
}
Related
This is html code snippet:
my_button.onclick = () => {
image_holder_div.classList.remove('display_none_class');
let imgTag = `<img id="nnn" src="${fileURL}" class="mx-auto d-block" alt="..."></img>`;
image_holder_div.innerHTML = imgTag;
}
.container-fluid{
max-width: 650px;
width: 95%;
padding: 30px;
background-color: rgb(250, 252, 253);
border-radius: 4px;
border: 1px solid #dfe1e5;
/* box-shadow: 2px 2px 2px; */
position: relative;
}
.first{
height: 400px;
border: 2px dashed #8b8e96;
background-color: #fffce5;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 10px auto;
}
.image_holder_div{
height: 400px;
width: 100%;
border: 2px dashed #8b8e96;
background-color: #b4a429;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 10px auto;
position: absolute;
top: 30px;
}
<div class="container-fluid">
<div class="first">
</div>
<div class="image_holder_div display_none_class">
</div>
</div>
When I click on my_button to display image, the image_holder_div not maintained aspect ratio while displaying image. It's showing like this I upload the image here
image_holder_div
Can anyone please tell me why it's happening and how can I fix this issue...
Explanation of the cause:
It's totally clear from the code, that you have set the width of image_holder-div to 100% of its parent container. Since its parent element is .container-fluid, it would attain its width. It is seen that you have added padding: 30px in .container-fluid, hence, you see a space of 30 pixels between the parent and image holder div.
Solution:
You can add the following styling on the image_holder_div:
width: calc(100% - 60px);
Adding this line would use some CSS calculations and set the height of the div equal to 100% of the parent element minus 60px, i.e. 30px from left and right both. (Don't forget to add space before and after the minus sign)
For more about the calc() function:
https://www.w3schools.com/cssref/func_calc.asp
.home {
height: 100vh;
border: 0px solid rgb(255, 255, 255);
background-image: url(../img/b.jpg);
background-size: cover;
}
.home-content {
height: 80vh;
/* border: 4px solid red; */
}
.heading {
/* border: 2px solid red; */
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
<section class="home">
<div class="home-content">
<div class="heading">
<div>Shubham karwal</div>
</div>
</div>
</section>
After removing border from .home the text Shubham karwal which was previously centered shifted towards left a bit.
What to do?
Please do help
You just have to add four lines to your css file:
.heading div {
height: 100%;
text-align: center;
}
Here is the example with the css added:
.home {
height: 100vh;
border: 0px solid rgb(255, 255, 255);
background-image: url(../img/b.jpg);
background-size: cover;
}
.home-content {
height: 80vh;
/* border: 4px solid red; */
}
.heading {
/* border: 2px solid red; */
display: flex;
height: 100%;
justify-content: center;
align-items: center;
font-size: 100px;
}
.heading div {
height: 100%;
text-align: center;
}
<section class="home">
<div class="home-content">
<div class="heading">
<div>Shubham karwal</div>
</div>
</div>
</section>
It depends on where the border is being added/removed. And also whether any other CSS settings are keeping the standard padding/margins that a browser might add to some elements or not.
The height is set at 100vh. If the box-sizing has not been altered it will default to value content, which means any padding and any borders are not included in the browser's calculation of the size of an element.
In the snippet given in the question neither the default padding/margins nor the default setting of box-zising are altered. Hence the height overall is greater than 100vh (what with the default top padding and the addition of a border) so space for a scroll bar is created on the right hand side and the text (well, the elements it is in) all shift a bit to the left.
Quite often you'll see these settings at the top of a style sheet:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
which means all three of those settings are set as given for all relevant elements unless subsequently set.
Try this in your 'real' situation to see if it cures the problem.
This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 3 years ago.
i try to fit span in another span but for some reason it doesnt work.
I have already tried display: flex and display: flexbox.
JSFiddle
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
background-color: #f0f0f0;
}
#midbox {
display: block;
position: absolute;
width: 90%;
height: 85%;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color: #7d7c7d;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview {
display: block;
position: relative;
height: 100%;
width: 35%;
background-color: #525052;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview p {
margin: 0;
padding-top: 3%;
font-size: 2em;
opacity: 0.7;
color: #f0f0f0;
font-family: 'Lato', sans-serif;
text-align: center;
}
#cont {
display: block;
position: relative;
height: 100%;
width: 35%;
background-color: green;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
<span id="midbox">
<span id="preview">
<p>Preview</p>
</span>
<span id="cont">
<p>Why does this apper under the box and not on the left?</p>
</span>
</span>
Expectation:
Content of span with green background should be inside the lightgray box.
Output:
Content of span with green background is outside of any box.
Can you try adding float:left; to both your #preview span and #cont span. Float left forces two elements to stay on the left side.
#preview, #cont{
float:left;
}
I updated your fiddle. Try the fiddle here:
https://jsfiddle.net/edy0whkp/
Short Answer
You're setting display: block to your span elements. This turns them into block elements which start on a new line and they expand the size of their parent container. Changing the display to dispay: inline-block will cause the elements to not start a new line and to only take up as much space as they need.
https://jsfiddle.net/xypntkc0/
More details
In the JSFiddle I changed the parent element to be a div instead. Setting it to a div makes it a block component so you also don't need the display: block when it's a div. It's bad practice to place block elements inside of inline elements (you have a paragraph tag as a child tag to your span tags) So I would actually change all your span tags to divs
I also changed the position to position: relative on the parent component. You typically only want to set absolute to the children elements inside of a parent component that has position: relative. The parent is set as relative so that their absolute positioned children get positioned relative to the parent.
Even more detail
If you want to align elements next to each other inside of a container, a good tool to use is flexbox. You can set display: flex to the parent element to mark it as a flex container. Then the children will automatically be set as flex items and will render side by side and boom, you're done.
https://jsfiddle.net/vkru8wg7/
It looks like you're trying to make #preview and #cont sit side by side within #midbox. If this is the case, simply make #midbox {display: flex;}
body {
margin: 0;
background-color: #f0f0f0;
}
#midbox {
display: flex;
position: absolute;
width: 90%;
height: 85%;
top:0; right:0; bottom:0; left:0;
margin:auto;
background-color: #7d7c7d;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview {
display: block;
position: relative;
width: 35%;
background-color: #525052;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview p {
margin: 0;
padding-top: 3%;
font-size: 2em;
opacity: 0.7;
color: #f0f0f0;
font-family: 'Lato', sans-serif;
text-align: center;
}
#cont {
display: block;
position: relative;
width: 35%;
background-color: green;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
<span id="midbox">
<span id="preview">
<p>Preview</p>
</span>
<span id="cont">
<p>Why does this apper under the box and not on the left?</p>
</span>
</span>
If you want to learn about flexbox there's a great article at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
i have a div in another div whose height is 48px and position relative. now i have a child div in the div whose height is 48px. i want the child div max-height to be set to 80% and min-height set to 40%. in doing so, the child divs height is just 48px.
Below is the code,
<div class="top_div">
<div class="drawer">
<div class="menu">
<header>
<Svg>
<button></button>
</header>
<ul>
<li></li>
</ul></div></div></div>
.top_div {
z-index: 1;
display: flex;
position: relative;
width: 100%;
height: 48px;
padding: 0 12px 0 12px;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
align-items: center;
}
.drawer {
display: flex;
flex-direction: column;
background-color: $white;
position: absolute;
width: 380px;
top: 55px;
right: 8px;
min-height: 40%;
max-height: 80%;
header {
height: 41px;
border-bottom: 1px solid #CCCCCC;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 0px;
padding-top: 2px;
svg {
margin-left: 16px;
}
}
ul {
overflow-x: hidden;
}
::after {
content: " ";
position: absolute;
bottom: 100%;
left: 83%;
margin-left: -5px;
border-width: 14px;
border-style: solid;
border-color: transparent transparent $white transparent;
}
}
If i remove position : relative for top_div then it works well but remove the box-shadow for topbar...how can i fix this. I want the box-shadow to be there. or if i keep position:relative for top_div then i want the height of the drawer to be 80%.
How can i fix this. could someone help me. thanks.
I inserted the code into an html document, and set the position of your child's div to relative. For me this solved the issue, and I got exacly what you want to do.
Try this.
I hope this can help, for me it helped.
I am working on a modal in a react app, the width is set to auto and the position is fixed, I am trying to get it centered in the middle of the screen horizontally.
.Modal {
position:fixed;
width: auto;
z-index: 500;
align-content: center;
background-color: rgba(255, 255, 255, 0.889);
border: 1px solid #ccc;
box-shadow: 5px 5px 5px black;
padding: 0px;
font-size: 12px;
box-sizing: border-box;
transition: all 0.3s ease-out;
}
I have tried a few of the solutions that come up in stack overflow when searching to center the modal.
The main issue I am having is that this modal is above other elements on the z-index and if I change the position to absolute, as most of the examples suggest, the items that have been rendered below it on the z-index get shifted down the screen.
This doesn't work for me.
Try adding margin:0 auto; to your css and remove position:fixed.
Adding "margin: 0 auto;" is not going to work on a item with position: fixed.
Either lose the position fixed and do margin: 0 auto;
Or
Set the left position on (50% - width element / 2).
But i guess the first solution is the easiest one.
because your modal is position fixed, you need to use left or right css properties to change the horizontal position of your modal. But you have 'width' auto, which will not work because the width can vary. The easiest way would be to wrap the modal in a parent div, like the following
.modal-parent {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.modal {
padding: 40px;
background: white;
}
<div class='modal-parent'>
<div class='modal'>
</div>
</div>
or if you don't want a parent div, you can just give it a static width, and the height can vary:
.modal {
position: fixed;
padding: 40px;
box-sizing: border-box;
top: 0;
left: calc(50% - 150px);
width: 300px;
background: teal;
}
<div class='modal'>
</div>