I need to center the text in one of my inline-block button. How might I go about accomplishing this? Any help will be appreciated.
Source Code:
CSS:
.dropMenu
{
color: #FFFFF0;
text-decoration: none;
display: inline-block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
text-align: center;
}
.dropMenu:hover,
.dropMenu.selected
{
background-color: #544E4F;
}
HTML:
dropMenu
Without vertical-align : middle:
http://img140.imageshack.us/img140/7476/withoutt.png
With:
http://img834.imageshack.us/img834/904/withe.png
I've just find the solution by adding a label and changing his css:
Button
<label for="dropDown">Menu</label>
Css
label
{
padding: 0 5px 0 5px;
vertical-align:super ;
}
.dropMenuButton
{
color: white;
text-decoration: none;
display: inline-block;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
padding: 5px 5px 5px 5px;
}
If you know for sure that your options are going to fit on one line per option, you can use the line-height property to set the height and the text will automatically be vertically centered.
Related
I need to have a button that activates a slide down menu and a div that has a link in it, in a nav bar, the button and the link have a name and a small line of text underneath. I want the small line of text to be a smaller font. If I put the line of text in a p tag and specify a smaller font, I cannot get the text to align within them neatly.
I can use padding on the link to push it down, but when I start using media queries to make things smaller, they fall out of alignment. I have also tried using line height but have similar problems. I can go through all the media queries adjusting padding/line height slightly to get alignment, but obviously this is not fixing the problem, just creating a messy solution.
If I remove the font size on the small line of text, they align properly. Can someone help me understand the cause of why using different font sizes cause the alignment of the text in a button and div to change differently and suggest a solution so they align easily and consistently when I resize other properties such as the height of both. Thanks
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float:left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
top:25px;
line-height: 3pt;
z-index:10;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float: left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
width:120px;
top:25px;
line-height: 3pt;
z-index:10;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
}
<html>
<button class="main-menu-button">My button<p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>
Removed lineheight from both
Removed margin from p
Added margin to div for the button*
Step 3 would be better if you use only divs or only buttons though.
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float:left;
position:relative;
font-weight: 600;
font-size: 16pt;
height:50px;
top:25px;
z-index:10;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
float: left;
position:relative;
font-weight: 600;
font-size: 16pt;
padding-top: 5px;
height:50px;
width:120px;
top:25px;
z-index:10;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
margin: 0;
}
<html>
<button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</html>
button are a bit special and there is a default center alignment applied to them. You need to do the same with the div
.main-menu-button,
.main-menu-link {
box-sizing: border-box;
display: inline-flex;
flex-direction:column;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
height: 50px;
line-height: 3pt;
width: 120px;
background-color: white;
border: 1px solid green;
justify-content:center;
align-items:center;
}
p {
font-size: 8pt;
margin-bottom:0;
}
<button class="main-menu-button">My button<p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a>
<p>bit of text</p>
</div>
.wrapper {
display: flex;
}
.wrapper > * {
margin-right: 5px;
padding: 5px 10px;
}
.main-menu-button{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
background-color: white;
border: 1px solid green;
}
.main-menu-link{
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 16pt;
width:120px;
text-align: center;
border:solid 1px black;
}
/* if you remove font size in the p tag, the text aligns, but I want this below*/
p {
font-size:8pt;
margin: 0;
}
<html>
<div class="wrapper">
<button class="main-menu-button"><span>My button</span><p>bit of text</p></button>
<div class="main-menu-link"><a>My link</a><p>bit of text</p></div>
</div>
</html>
What is happening here?
Added a wrapper for both elements and given display: flex;
You don't need the height property for inner elements anymore since flex parent's children by default will be of same height.
When I specify the font in body style in CSS it works ok. But when I do the same for div it has no effect.
.tel {
display: inline-block;
background-color:rgba(0,0,0,0.5);
height: 60px;
padding: 30px 30px 0 0;
font: 24pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: cover;
}
The problem was that i needed to use styling like this
.tel a{
font: 24pt/0.64 "Consolas", Arial, Helvetica, sans-serif;
color: white;
padding: 0 0 0 50px;
}
try with !important and see if it has an effect, if so, an other class is applied on your DIV.
I am trying to recreate a logo with plain text and CSS no images, the issue I have I can't seem to get padding to 0 around the text so that top and bottom text are only 2-5px apart.
Also is it possible to have them one on top of the other but not the have BIG TITLE CSS to
display:block
instead only to wrap around the text.
jSFiddle: http://jsfiddle.net/theStudent/ag60a6hs/
CSS:
/* FONT IMPORT */
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
.logo_large_txt{
color: #2faed9;
margin:0 0 0 0;
padding: 0 0 0 0;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 36px;
background-color: #000;
white-space: nowrap;
display: block;
}
.logo_small_txt{
color: #c2c2c2;
padding: 0;
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 16px;
background-color: #000;
white-space: nowrap;
}
HTML:
<div>
<span class="logo_large_txt">BIG TITLE</span>
<span class="logo_small_txt">SMALL CAPS</span>
</div>
Thanks
This isn't a padding issue, it's a line-height issue. Set line-height: 1em; on the relevant elements (those with text in them) and see how the height of the element now equals the size of the text.
Perhaps adding line-height might help, for example line-height:50% for logo_large_txt.
Yes this is line-height issue. You could set line-height to 1 or less on div and see the result.
For second part You should add <br /> tag between <span> tags.
fiddle or preview:
/* FONT IMPORT */
#import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
.logo_large_txt{
color: #2faed9;
margin:0 0 0 0;
padding: 0 0 0 0;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 36px;
white-space: nowrap;
}
.logo_small_txt{
color: #c2c2c2;
padding: 0;
margin: 0;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 16px;
white-space: nowrap;
}
div.logo {
line-height: 0.8;
display: inline-block;
background-color: #000;
}
<div class="logo">
<span class="logo_large_txt">BIG TITLE</span><br />
<span class="logo_small_txt">SMALL CAPS</span>
</div>
This might be a stupid question, but it has been troubling me a lot.
I have made 4 boxes and each box should have the text starting from a same line, but sometimes (when the text is less), it starts from the bottom.
Here's the image displaying it:
Ideally, it should start from the top and go till the bottom. Like this:
What changes should I make in my CSS code?
CSS :-
.show-text {
margin-left: 264px;
float: left;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-2 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-3 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-4 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
My JSFiddle :- http://jsfiddle.net/xa0obvyr/
Because you are using inline-block, you need to specify vertical alignment if the default value doesn't suit you. In this case, you need
show-text-col-4 {vertical-align: top;}
However, your setup is less than ideal. Rather than floating the first time with a large left margin, I'd recommend you use a centered wrapper element instead, and style each of the columns in the same way.
This is what you need? with one CSS class and automatic 1/4 width of each column.
Please check the demo: http://jsfiddle.net/sk1rqxeo/
.show-text-col {
float: left;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;
color: #606060;
width:24.5%;
display: inline-block;
}
You will need to set width to <p> tag
FIDDLE DEMO
.show-text-col-3 p{
width:200px;
}
I want an image on the left and three pieces of text on the right. I've got that, but trying to add some space between them is proving to be an exercise in futility. I've tried adding both padding-left and margin to the css, but they ignore them like a cheerleader does a nerd.
The jsfiddle is here: http://jsfiddle.net/GwYJH/
Here's my HTML:
<a id="mainImage" class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/1456334050" rel="nofollow noreferrer"><img height="200" width="160" src="http://ecx.images-amazon.com/images/I/51ETjedyMAL._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU01_.jpg"></img></a>
<div class="category">Picaresque Satire</div>
</br>
<div class="title">the Zany Time Travels of Warble McGorkle</div>
</br>
<div class="author">Blackbird Crow Raven</div>
</br>
...and the CSS:
body {
background-color: black;
}
.floatLeft {
float: left;
}
.category {
display: inline-block;
font-family: Consolas, sans-serif;
font-size: 2em;
color: Orange;
padding-left: 25;
margin: 25;
}
.title {
display: inline-block;
font-family: Calibri, Candara, serif;
color: Yellow;
}
.author {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
}
I also want each piece of text to wrap if the viewbox narrows. IOW, "Picaresque Satire" should become:
Picaresque
Satire
...if there's not enough space to fit on one line; what it's doing now is moving below the image if it runs out of space (then it will break as I want it to if it gets squished even more).
#mainImage {
margin-right:15px;
}
.category p {
word-wrap:break-word;
}
Demo here:http://jsfiddle.net/GwYJH/8/
How the word wraps (i.e. if it wraps to the right hand side of the image or below it) is wholly dependent on the width of the containing element.
I have some suggestions for you. Fist of all, use this code to get the spaces.
.floatLeft {
float: left;
padding-left: 25px;
margin: 25px;
}
The, set the width to the .category, so you wrap the text
.category {
display: inline-block;
font-family: Consolas, sans-serif;
font-size: 2em;
color: Orange;
padding-left: 25;
width:30px;
}
jsfiddle
Non-zero padding and margin values require a unit to be specified. I assume you wanted pixels:
padding-left: 25px;
margin: 25px;
http://jsfiddle.net/GwYJH/6/
Old versions of IE would allow you to omit the unit, but modern standards compliant browsers do not.
You dont have (px) defined on the padding-left and margin. Remove margin and only use padding-left on all of the divs.
Use this code instead:
.category {
display: inline-block;
font-family: Consolas, sans-serif;
font-size: 2em;
color: Orange;
padding-left: 25px;
}
.title {
display: inline-block;
font-family: Calibri, Candara, serif;
color: Yellow;
padding-left: 25px;
}
.author {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
padding-left: 25px;
}