I can't get the text inside to sit vertically centered in the box. Right now, its sitting a bit too low.
https://jsfiddle.net/bye5vqpg/
.box {
position:relative;
vertical-align: middle;
color: #0b7;
display: inline-block;
height: 15px;
line-height: 20px;
text-align: center;
transition: 0.5s;
padding: 5px;
cursor: pointer;
border: 1px solid #0b7;
-webkit-transition:0.5s;
}
If it's single row texts you should try line-height with fix height of a div
.box {
position:relative;
color: #0b7;
display: inline-block;
height: 40px; // changed
line-height: 40px; // changed
text-align: center;
transition: 0.5s;
padding: 5px; //removed
cursor: pointer;
border: 1px solid #0b7;
-webkit-transition:0.5s;
}
fiddle
EDIT:
If you still want to add padding to left and right then add
padding: 0 5px;
Change line-height to be 15px. This will work for single line.
I think you should change the "height" to auto and remove the "line-height" or change the "height" to equal with "line-height"
Use display:inline to the box.
.box {
position:relative;
vertical-align: middle;
color: #0b7;
display: inline;
height: 15px;
line-height: 20px;
text-align: center;
transition: 0.5s;
padding: 5px;
cursor: pointer;
border: 1px solid #0b7;
-webkit-transition:0.5s;
}
https://jsfiddle.net/r5jt8uu0/
Related
This question already exists:
How to change one element style when another is hovered [closed]
Closed 8 months ago.
Sorry for making things unclear last time, it really was code dump because I didn't know how to explain what was happening. Good news, I fixed it now. However now I a problem with CSS. I am trying to change background colour of a table row () when hovered over a button (my code doesn't work). The css is provided below. The problem is at the buttom of the CSS (the two hover styles): Please tell me what I am doing wrong, I searched for answers for so long however I have not come up with a proper solution.
body{
margin: 0px;
font-family: Helvetica;
}
header{
background-color: #e7e7e7;
height: 100px;
padding-top: 25px;
text-align: center;
font-size: 50px;
}
table{
background-color: white;
border-collapse: collapse;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
#myTable{
margin-top: 50px;
}
th,td{
padding: 20px;
text-align: center;
border:1px solid black;
width: 200px;
height: auto;
}
.nthChild{
background-color: #e7e7e7;
}
#nlRow th{
border-top: 0px;
}
input{
font-size: 20px;
width: 100%;
padding: 5px 0px;
border-radius: 4px;
}
#numeracyCredits, #literacyCredits{
width: 30%;
}
.button{
font-size: 20px;
padding: 5px 20px;
width: 15%;
border-radius: 4px;
background-color: white;
color: black;
border: 2px solid black;
transition-duration: 0.3s;
}
.button:hover{
background-color: #c4c2c2;
transition-duration: 0.3s;
}
.button:hover + .nthChild{
background-color: white;
}
the .nthChild of what? you should put the parent or whatever from that .nthChild. Or else if you give it a class or an id use that in stead of .nthChild then it should work.
I'm trying to make this text align with the border. However, as of now what I have found are just mismatches.
Defect menu-button img
.subscribe-now {
position: absolute;
display: table-cell;
text-align: center;
background-color: #eb5e28;
line-height: 1em;
border-radius: 25px;
padding: 0.5rem 1rem;
vertical-align: center !important;
width: 200px !important;
height: 40px !important; // If I change this to auto then the size is so big and I need minus padding :(
padding-top: 0px;
padding-bottom: 0px;
border-image:
margin-left: 20px !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
}
You can try this approach. See if this works for you. Let me know
.subscribe-now {
text-align: center;
background-color: #eb5e28;
border-radius: 25px;
vertical-align: middle;
width: 200px;
height: 40px ;
color: white;
font-weight: bold;
border: 0px solid #eb5e28;
}
<button class="subscribe-now">Langganan Sekarang</button>
I want to centralise a button or a tag within the line it is on (by themselves).
I've written this CSS which makes it yellow, puts a border around it etc but it is always left aligned. How do I centralise it?
a.butt, button.butt {
border: 1px solid #ffff01;
background-color: transparent;
height:50px;
cursor:pointer;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
text-align: center;
color: #ffff01;
}
Thanks for your help
several ways to do this, but maybe
a.butt, button.butt {
border: 1px solid #ffff01;
background-color: transparent;
height:50px;
cursor:pointer;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
text-decoration: none;
text-align: center;
color: #ffff01;
display: block;
margin-left: auto;
margin-right: auto;
width: ??px;
}
will do the trick.
You can do it by adding text-align:center; to parent <div>
Example here https://jsfiddle.net/uy4u781d/
margin-left:auto;
margin-right:auto;
width:150px; //width as you want
display:block;
This is where I am trying to accomplish this effect:
http://www.smalldot.agency/ccren/goals-page/
As the "val" bar increases in width, it should overlap the "current" text ((which is the same text as "val" but a different color)). I am able to force "current"'s copy on top of the "val" element, but I can't get it to rest underneath instead.
If I place the "current" p class below the "val" div class, the the text from "current" shows up south of the progress bar, rather than beneath it.
Also, the z-index: 0; doesn't seem to be doing anything to fix the problem.
HTML:
<div class="progdiv" style="width:100%;">
<p class="current">1,234</p>
<div class="val" style="width:3%;">1234</div>
</div>
CSS
.val {
height:100%;
border-radius:3px;
line-height: 1.5em;
font-size: 12pt;
background: #019BA9!important;
text-align: left!important;
vertical-align: center;
-webkit-box-shadow: 3px 3px 2px #bbbbbb;
overflow:hidden;
}
.progdiv {
background-color: #FFFFFF!important;
height: 1.5em;
text-align: right;
vertical-align: center;
border: solid 1px #eeeeee;
border-radius: 3px;
-webkit-box-shadow: inset 3px 3px 2px #bbbbbb!important;
text-align: left!important;
overflow: hidden!important;
}
.current {
text-indent: 6px;
height:100%;
border-radius:3px;
font-size: 12pt;
line-height: 1.5em;
text-align: left!important;
vertical-align: center;
color: #019BA9!important;
position:absolute!important;
text-align: left!important;
z-index: 0;
}
Just add position: absolute; to the .val CSS. Also remove the height:100% from both the .val and .current CSS.
I have a problem in my button width. my form is able to switch language. For some language the content of the button is longer then the button width, How can I adjust the button width proprety to the text lenght ?
Here is my CSS :
html .formRowSubmit input[type="submit"] {
width: 26%;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You should try setting a min-width instead of a width, this will let the button expand if need be. Once you do this you should also set some horizontal padding so the text isnt butted up to the end like so:
input[type="submit"] {
min-width: 26%;
padding: 5px 15px;
}
http://jsfiddle.net/jqjxd0xt/
Display the button as an inline-block (and delete the width)
html .formRowSubmit input[type="submit"] {
/*width: 26%;*/
display: inline-block;
margin: 5px 0% 5px ;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
You might want to add some padding if the text is to close to the border.
Try like this: demo
CSS:
.formRowSubmit input[type="submit"] {
width: auto;
margin: 5px 0% 5px;
margin-bottom: 10px;
height: 25px;
border-radius: 3px;
outline: 0;
-moz-outline-style: none;
background: #CAD722;
border: none;
color: white;
font-size: 10px;
font-weight: 150;
cursor: pointer;
transition: box-shadow .4s ease;
}
HTML:
<div class="formRowSubmit">
<input type="submit" value="Submit loooong llloooonnnng text">
</div>