I am trying to center the button below - I have tried from other examples altering CSS code or using text-align: center but neither options have worked. I know the code itself can be fixed but I am quite a newbie so any tips would help.
Thanks
<a class="btn-group"
style="color: #ffffff;"
href="http://requestgoods.com/item-request/">Request Goods Now</a></button>
Try This:
div {
text-align: center;
}
<div>
<button><a class="btn-group" style="color: #000" href="http://requestgoods.com/item-request/">Request Goods Now</a></button>
</div>
Take one outer div and set text-align : center to this div.
use this Code :
<div style = "text-align: center;">
<button>
<a class="btn-group" href="http://requestgoods.com/item-request/">Request Goods Now</a>
</button>
</div>
The simplest solution is:
HTML
<div>
<button>
<a class="btn-group"
style="color: #ffffff;"
href="http://requestgoods.com/item-request/">Request Goods Now</a>
</button>
</div>
CSS
div {
text-align:center;
}
Related
Here are two potential situations in my HTML:
<div class="ptb_sold">
<span class="ptb_one_line">Sold</span>
</div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register</a>
</div>
<div class="ptb_sold"></div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register</a>
</div>
My goal is to hide "ptb_link_button" in the first one, but allow the "ptb_link_button" div to display in the second example. Basically, if the item is sold, I do not want to display the "Register" button.
I initially thought this would work:
div.ptb_sold:empty+.ptb_link_button {
display: none;
}
<div class="ptb_sold">
<span class="ptb_one_line">Sold</span>
</div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register - Link one</a>
</div>
<div class="ptb_sold"></div>
<div class="ptb_link_button">
<a class="ptb_link_button" target="_blank" href="https://test.html">Click to Register - Link two</a>
</div>
But unfortunately it does not. Any other suggestions?
If I understood you correctly, then I think this would be the approach:
// Hides the button if sold
div.ptb_sold + .ptb_link_button a.ptb_link_button {
display: none;
}
// Show the button if not sold
div.ptb_sold:empty + .ptb_link_button a.ptb_link_button {
display: block;
}
Example - https://jsfiddle.net/4o1gvnjx/
Also, I would consider changing the class name of the container for the button to be something like 'ptb_link_button-container' to avoid confusion. That way, the CSS selector would be more streamlined.
Is there a way get through to add text after img tag and it can be update everytime?
I'm using jsp and not support html5.
I have try through some example from here:
https://www.w3schools.com/howto/howto_css_image_text.asp
<button type="button" class="button" id="updatetext" style="background-color:Transparent;background-repeat:no repeat;border:none;padding:25px">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" height="85" width="85" align="left">
</button>
The Result:
The text inside the image can be update.
img {
margin-bottom: -20px;
}
#some_id{
color: white;
}
<button type="button" class="button" id="updatetext" style="background color:Transparent;background-repeat:no repeat;border:none;padding:25px">
<img src="https://image.shutterstock.com/z/stock-photo-chinese-snack-and-chinese-tea-on-old-brown-wooden-table-in-dim-light-still-life-imge-and-select-1177215178.jpg" height="85" width="85" align="left"><p id = "some_id">text</p>
</button>
then you can use jsp by referencing to id to update text
You can use :after or :before selector to append or prepend text after any element.
img:after{
content: 'text after image'
}
<button type="button" class="button" id="updatetext" style="background-color:Transparent;background-repeat:no repeat;border:none;padding:25px">
<img src="..\icon\press.png" height="85" width="85" align="left">
</button>
You need to link the html message to a variable using jsp annotations, in this case is: <%= Variable %>, which will be updated somehow, also put a little bit of style on the page.
Try this:
<div style="display:inline-block;vertical-align:top;">
<button id="button_test">
<img src="https://cdn2.iconfinder.com/data/icons/facebook-ui-colored/48/JD-22-64.png" alt="img"/>
<div style="display:block;"><%= Variable %></div>
</button>
</div>
</div>
So this kind of question has been asked many times, I know, but for some reason nothing seems to work for me.
This is a simplified version of what I have (with the last solution I tried):
<ul class="pagination pull-right" style="display: table-cell; vertical-align: middle; text-align: center; background: red;">
<span class="pagination-info pull-left" style="background: blue">Filas por página: </span>
<span style="display: inline-block;">
<span class="btn-group dropup pull-left" style="position: relative; display: inline-block; vertical-align: middle;">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
5 <span class="caret"></span>
</button>
</span>
 || Mostrando 1 - 5 de 8 filas en total
</span>
</ul>
And this is what it looks like (colored in blue and red for descriptive purposes):
original layout
JSFiddle: https://jsfiddle.net/oxaa30ug/ (not exactly as the picture but still shows my problem)
What I'm trying to accomplish is to get the blue span as well as the text at the right centered vertically, and not at the top as they currently are. Any help is very appreciated.
You can use a custom class when needed.
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
vertical-align with Bootstrap 3
In bootstrap 4, they have provided a dedicated class align-content-center (using flexboxes)
I am trying to achieve the icon shown below, using combination of 2 bootstrap icons:
I tried giving margin\top\right. None of it seem to have any effect.
This is what I have tried so far: jsfiddle
Code:
<div class="row pull-right" style="margin-right: 50px; margin-top: 10px;">
<div id="toggleIcon">
<div class="eye">
<span class="glyphicon glyphicon-eye-open adjust-eye"></span>
</div>
<span class="glyphicon glyphicon-align-justify"></span>
</div>
</div>
SCSS: (in fiddle)
Kindly let me know how can that be achieved and also why isn't margin\top\right working as expected?
#toggleIcon .eye{position: relative; bottom:-20px;}
I'd like to show a <h4> in line with a <button>:
<h4 style="display:inline-block;">headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
https://jsfiddle.net/punwaew1/1/
Result: the two elements are shown below each other. Why?
Because h4 and .dropdown are on the same level. Set display: inline-block for the elements on the same level to make them align.
h4,
.dropdown {
display: inline-block;
vertical-align: top;
margin: 0;
}
<h4>headline</h4>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
<span>Button</span>
</button>
</div>
The default value of display on a <div> element is display:block;. You have to set the display:inline-block; to the <div> too!
Simply add the following rule (https://jsfiddle.net/punwaew1/5/):
div.dropdown {
display:inline-block;
}
Add line style to <div class="dropdown" **style="display:inline-block;"**>
DEMO 1
OR use proper rows and column of bootstrap to get best results and consitency.
Here is your fiddle Just give display: inline-block to dropdown div
https://jsfiddle.net/sesn/punwaew1/4/
This can be done without any extra css. So in-order to make your button inline with your headline, place the button between the <h2></h2> heading tag.
Structure:
<h1>Headline
<button class="btn btn-default dropdown-toggle btn-dropdown-flat" type="button">
Button
</button>
</h1>
Have a look at your updated fiddle here