How do I position text inside a container? - html

I have created a div class container but when I type in the text it appears in the middle of the container. How can I align the text to the top left corner of the container?
By the way I have used position: relative, top 0px left 0px.
However, this moves it to the the corner of the browser page, not the corner of the container.

There are many ways the text gets align into the center , you might have used the tag , or your container is forcefully moved in the center , the proper way of moving container to the middle is margin:0 auto; . You must give the html and css code your are using .

You might have used a text-align: center; can't really tell since you have not provided us with the necessary information to help you.
If it is a submit button in a form, and you inputted the text in the value="" it will automaticly center your text, the same goes for the tag called button between the tags.
Please make a codepen press the pen button, and copy the related code, and give us the link to your pen.
When you are using position absolute in your box, you need something to put it in relative to. So add a position relative to your box, and a position absolute to your text.
However I would suggest you to use line-height: "height of your box"px; and padding-left: 5px for an example to align your text in the box, if it is a button. Remember to use box-sizing: border-box; that allows you to use padding without expanding the box.

the align of the text can be changed using
margin-left:-1%;
margin-top:-1%;
float: left;

<div class="container text-center"> </div>

Related

How to make a image inside of a button clickable [duplicate]

I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using &nbsp works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}​
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.

Make sure content ends up below absolute positioned element

So, I have a number of buttons that will expand a div with some content below it.
I want to place them in an order so that the expanded content is right after the button that will expand it. This is because I want the tab order to be:
tab to a button and click it
tab through the expanded content
tab to the next button or tab to content below
To achieve this I've made the expanding content to be position absolute. So far so good. The problem now is that the content after the expanded container does not get pushed down.
See page and code here: http://niklasholmberg.se/temp/tab1.html
My first solution to this was to measure the height of the expanded div and add that as padding to a container that is before the content that should be pushed down.
See page and code here: http://niklasholmberg.se/temp/tab2.html
I don't quite like the solution and want something that does not require scripting to get the layout right.
Can I somehow make the div with class group also "wrap" the container that is positioned absolute?
Can I somehow position the expanded div in another way that doesn't use position absolute but achieves the same result?
Or maybe someone has a complete other solution to this case.
Thanks
Okay,
you can use position relative to expanded div, ie article in this case.
<article id="content1" class="expandarticle">
<h1>Content 1</h1>
aa
<button>bb</button>
<input type="text">
</article>
your css should be
.expandarticle {
background: none repeat scroll 0 0 #ccc;
display: table;
left: 0;
padding: 10px;
position: relative;
right: 0;
}

Vertically Centering Links in inside Div

http://www.fccorp.us/index.php
The vertical column to the left is my site menu system. The column is a div with a height:100%, and the different details are div's laid over it.
The buttons are DIV's with blank buttons as backgrounds, with links on them. I have two different size buttons, the big one 60px tall and the small one 30px. Using CSS can I get the links to be centered vertically regardless of the height of the button's DIV?
I've looked here and used a few CSS sites & Android Apps. The site here suggests I can't, but I can't understand why the CSS group would not create a vertically centering function since it seems so needed.
Am I just missing something or am I really trying to get something that isn't available with CSS?
Based off your site, you can use line-height to adjust the vertical positioning of the text.
Try applying this to your 30px tall links:
line-height: 30px;
And this for the 60px tall:
line-height: 60px;
Additionally, you should not be nesting <div> tags within <a> tags.
Use this:
.menubuttonthick{line-height:60px;}
.menubuttonthin{line-height:30px;}
That will center all of your links.
On another note, currently you have the following structure:
<a href="#">
<div>text</div>
</a>
That is invalid HTML. I'm not a "HTML must be valid at all times" type of guy, but when you can fix it that easily, I think it wouldn't hurt making it valid. You should use the following:
<div>
text
</div>
Add this to your CSS. It will work regardless of the height of your buttons:
.menubar a div {
display: table-cell;
vertical-align: middle;
}

How to position an image inside a button?

İ have this button, and i want to but an image at the left, and it should have a text
which i could position as i want inside the button. i tried a few ways but i couldn't position
the text and image the way i wanted.
<button class ="buttn"> Click Here <img src ="./logo.png"> </button>
.buttn{
background:transparent url(/logo.png) no-repeat left;
border:0;
padding-left: xxxpx; // this is how wide the image is plus any additional padding
}
<button class="buttn">Click Here</button>
The path should be replaced with the correct one.
Basically, set the image as the background, remove any default button styling and then play with the padding until you position the text as expected.
Multiples:
.buttn{
background-image:url(/logo.png), url(/gradient.png);
background-repeat:no-repeat, repeat-x;
background-position:center left, center left;
}
You don't need to use an image for the gradient, by the way. Just showing that you can have more than one background.
Ive never put an image in a button. I'm guessing it doesn't show that. In which case wrap the button in a div with float left (or same demensons as button) and position relative. Position the image with absolute positioning where you want it. Use padding in the button to push the text which ever way you want it to go. If padding doesn't work then wrap the text in span and AP it to.
Kai answer is cleaner if it works in all browsers.

using images inside <button> element

I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using &nbsp works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}​
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.