I'm trying to align a textbox inside a <div> - using the class .textbox
CSS Code
.sec1 {
padding-left: 20px;
padding-right: 20px;
display: relative;
}
.textbox {
display: absolute;
top: 10px;
background-color: white;
border-radius: 10px;
}
.subcars {
display: inline-flex;
}
.selectcar {
width: 80%;
}
HTML Code
<div class="subcars">
<div class="sec1">
<button class="bot"><img class="selectcar" src="Images/caradd2.png" alt="selectcar"></button>
<br><input name="cars1" class="textbox"></input>
</div>
</div>
The results so far is (I'm using pesticide to clarify the elements):
As it is possible to see, the text box is not centered inside the <div>, how can I fix it?
As #m4n0 mentioned in the comments, relative and absolute are not invalid values for display attribute. So, you don't need them in your code.
And to center the textbox, you can add margin-left property with a value accordingly under .textbox css.
Related
I have a div containing two label elements. Each label should be on a side of the div. As labels are inline elements, I have tried with display: block and also with display: inline-block for margins to take effect, but the result is not the expected one.
div {
color: #ffffff;
background-color: #3f3f3f;
}
label:nth-of-type(1) {
margin-left: 5px;
}
label:nth-of-type(2) {
display: block;
<!-- display: inline-block; -->
margin-right: 5px;
margin-left: auto;
}
<div>
<label>Left side label</label>
<label>right side label</label>
</div>
As you can see with the code execution, the second label is not respecting the margins and is being displayed underneath the first one.
The label must have a width and display:block to work with margin auto.
Today it's more flexibel to use flexbox for this.
div {
color: #ffffff;
background-color: #3f3f3f;
display:flex;
flex-flow: row nowrap;
justify-content: space-between;
}
label:nth-of-type(1) {
margin-left: 5px;
}
label:nth-of-type(2) {
margin-right: 5px;
}
<html>
<body>
<div>
<label>Left side label</label>
<label>right side label</label>
</div>
</body>
</html>
With more modern methods like CSS Grid or Flexbox, this can be accomplished. But my solution will be with raw CSS to keep at a similar level to OP's code.
Both labels will need to have display: inline-block applied to get both elements to be treated like block elements and remain on the same line. You'll also need to set a width to give them a container to work with when adjusting the text placement. For this example, we'll do width: 50%.
Note: inline-block elements that take up a full width: 100% will result in the labels being on separate lines unless you modify the html to remove the whitespace in between the elements. Read more why on this behavior here and a personal CodeSandbox of fixing this.
You'll notice I also removed margin-left and margin-right from the width calculation and instead used padding to result in the same spacing on the left and right.
HTML:
<body>
<div>
<!-- Remove whitespace between labels to not exceed width: 100% -->
<label>Left side label</label><label>right side label</label>
</div>
</body>
CSS:
div {
color: #ffffff;
background-color: #3f3f3f;
padding: 0 5px;
}
label {
display: inline-block;
width: 50%;
}
label:nth-of-type(1) {
text-align: left; /* Not necessary, but you can explicitly set the behavior you want. */
}
label:nth-of-type(2) {
text-align: right;
}
Codepen
you don't need to specify the display property, just let it be inline and play around with the float property to float them.
<style>
div {
color: #ffffff;
background-color: #3f3f3f;
display: block;
height: 20px;
width: 100%;
}
label:nth-of-type(1) {
margin-left: 5px;
float: left;
}
label:nth-of-type(2) {
float: right;
margin-right: 5px;
}
</style>
<html>
<body>
<div>
<label>Left side label</label>
<label>right side label</label>
</div>
</body>
</html>
This question already has answers here:
Padding for Inline Elements
(3 answers)
Closed 4 years ago.
I have a link that looks like a button and I would like to set the background colour to be different.
However, I don't understand why my holder div does not take the same height as it's child. I doesn't take into consideration padding.
Is there a clean way to fix this?
.link {
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
You need to add display: inline-block to your .link element:
.link {
background-color: green;
padding: .9rem 3rem;
display: inline-block;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
By default, <a> elements are display: inline, and do not have their layout impacted by the containing block. That is to say, they do not allow for a height or width to be set, and do not respect vertical padding and margins.
The <a> tag default display is inline, so its parent will display it vertically along its line box (based on the vertical-align property), you need to change it to display: block or inline-block, depending on what you’re looking for;
.link {
display: block;
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
Because by default a tag will have the property of display: inline; so make sure to change the anchor tag to display: inline-block; or display: block;
I am building a navigation in angular which loads subpoints that are indented (I hope it's the right word).
So main nav-points will be on the very left of the navigation bar, sub nav-points will have a margin-left to have them indented a little bit. Futhermore, sub-sub nav-points will have a higher margin to have them indented further.
Now on it's own, this works just fine.
My issue is that I also need to display buttons on the very right side of the navigation bar that are not indented.
Since the navigation is loaded recursively and the buttons are for the individual navigation points, I can not place them in the parent.
Currently, html/css wise, this looks somewhat like this:
Parent - html
<div class="nav">
<items [items]="items" [subNavToggle]="false"></items>
</div>
<div class="content">
<content></content>
</div>
Parent - css
.nav {
float: left;
width: 245px;
align-items: stretch;
padding-left: 14px;
}
item/navpoint - hmtl
<div class="item" [class.subnav]="subNavToggle">
<div class="link"><a [routerLink]="[item.path]">{{ item.label }}</a></div>
<div class="edit-button"><img [src]="icon" /></div>
<div class="children indented">
<items [items]="items.children" [subNavToggle]="true"><items>
</div>
item/navpoint css
.item.subnav {
font-size: 100%;
width: 100%;
}
.indented{
margin-left: 10px;
}
.item {
font-size: 105%;
margin-top: 8px;
height: 20px;
width: 231px;
word-wrap: break-word;
display: flex;
text-align: center;
border-bottom: 1px solid #e0dede;
}
.link {
width: 80%;
display: flex;
height: 20px;
}
.edit-button {
float: right;
width: 24px;
text-align: right;
padding-left: 12px;
height: 24px;
}
Now due to the div around the recursive call inside the items having the indented class, the further down the sub-navigation I go, the further indented it gets.
The issue are the buttons, with further indention(?) they are pushed further off to the right. I'd want them to be the same distance from the right border of the navigation-box.
The html structure aspect of the buttons being inside the items can sadly not be changed.
My goal now is the decrease the width of the sub-items with each further recursive step to somehow align the buttons properly. sadly toying with the width property has not given me the results I hoped for.
As with the code above, the whole thing looks like this:
now, how can I get all the buttons properly aligned?
Try adding position relative on .item class.
.item {
position:relative;
}
Then use absolute to align the icon.
.edit-button {
position:absolute;
right:0; or right:10px;
}
Hope that helps.
I'm trying to center a text element and then have an explanatory "what is this?" next to it. However when I type in the "what is this?" part, it obviously moves the original text element off center. Is there a way to fix this using CSS or HTML?
You can wrap the text-element that needs to be centered in a div and style position:absolute to that div using CSS.
Here is an example without having to assign width to any elements. This should work fine with any length of text thrown at it.
http://codepen.io/ay13/pen/GJKawz
HTML and CSS:
h1 {
text-align: center;
}
h1 a {
position: absolute;
margin-left: 10px;
}
<h1>
<span>Centered Text What is this?</span>
</h1>
Here's an example of how you can do it:
http://jsfiddle.net/wgbs4asv/1/
You basically need to have the right-side "what is this?" div inside of the main div (and before the main div's content), but with the right-side "what is this?" div's CSS set to:
float: right;
width: 100px;
margin-right: -100px;
position: relative;
(but using whatever width you want, and with a negative margin-right to match the width). The width would offset the main div's position, but then the negative margin with the position: relative brings it back.
It will be better if you share your code.
but anyway, you will need to position the text relative and then add the explanatory in it and position it to absolute, here is the code to make things clear.
.parent {
width: 80%;
background: lightblue;
display: flex;
justify-content: center;
}
.container {
position: relative;
display: flex;
justify-content: center;
width: 80%;
height: 80px;
background: lightslategrey;
border: 1px solid red;
}
.text {
position: relative;
width: fit-content;
background: lightcoral;
text-align: center;
}
.explanatory {
width: max-content;
position: absolute;
z-index: 10;
color: white;
}
<div class="parent">
<span class="container">
<p class="text">text text text
<span class="explanatory">what is this?</span>
</p>
</span>
</div>
I have a div that has a fixed position on a page. It holds two inputs, but the inputs aren't equally spaced inside the div.
HTML
<div class="submit_content">
<input class="btn" value="Cancel"/>
<input class="btn" value="Save"/>
</div>
CSS
.submit_content {
position: fixed;
text-align: center;
width: 50%;
margin-left: 20px;
right: 20px;
background-color: blue;
padding: 10px;
}
.submit_content input {
width: 30%;
height: 25%;
margin: 0 auto;
margin-right: 20px;
text-align: center;
padding: 5px;
}
How do I make the two inputs inside the fixed div equally spaced? The jsfiddle demo shows them hovering closer to the left because i have the margin-right set. Otherwise the inputs would be immediately next to each other. They should be separated, but the spacing inside the div should still be equal
It's simple. The right button also has a margin-right, thus (since the left button does not have a margin-left like the right button), they have a little different spacing.
To get rid of this issue, add this line:
.btn:last-child { margin-right:0; }
jsFiddle demo.
You can achieve this through adding this css to your code:
css
.submit_content input {
width:30%;
height:25%;
margin: 0 auto;
text-align:center;
padding:5px;
margin:5px;
}
See it work in fiddle.
Add this to your CSS
.submit_content input.btn:last-child {
margin-right:0 ;
}
DEMO