I am trying to select the glyphicon and make it centered. What would be the correct selector to style the glyphicon inside the span element?
<section id="intro" class="intro-section">
<div class="container">
<div class = "row">
<div class="col-md-12">
<div class = "well">
<h1</h1>
</div>
<a class="btn btn-primary btn-lg page-scroll" href="#employment" id="arrow"><span class = "glyphicon glyphicon-chevron-down"></span></a>
</div>
</div>
</div>
</section>
#arrow {
text-align: center;
}
You can add text-align:center to the parent of the link/glyphicon:
.row .col-md-12 {
text-align:center;
}
bootply example
If you are trying to manipulate only the tag with the Glyphicon in it, simply give the tag an ID and select it that way.
<span id="myStyledGlyph" class = "glyphicon glyphicon-chevron-down"></span>
Is this what you're trying to accomplish?
Alignment will be difficult on the Glyphicon directly, since it is in an tag and already within a
You could trying wrapping the entire tag in a tag and assign an id to that like this:
<div id="alignThisDiv"><a class="btn btn-primary btn-lg page-scroll" href="#employment" id="arrow"><span class = "glyphicon glyphicon-chevron-down"></span></a></div>
Cause id is unique you can use id selector as you did. Check DOM to see if there are more than one elements with id #arrow and if there are then change them. Cause id should be UNIQUE.
In your case you also need vertical-align: middle:
#arrow {
text-align: center;
}
#arrow > .glyphicon {
vertical-align: middle;
}
If the span contains text and you want to align it as center then text-align: center will work. As far as, I am getting from your question, the span having class glyphicon would have some image/icon as its background and you want to align the span as center.
Try following and see if this helps you -
#arrow .glyphicon{
width: 50%;
margin: 0 auto;
}
Related
my web's URL
How to move the words in green frame into the red frame? I set up my css but
it doesn't change, where is the problem?
Where is the problem? and how to fix it??
Can you help me please to solve this problem?
Thanks in advance!
html code:
<div class="topmenu">
<a type="button" class="btn btn-flat text-white">儲存</a>
<a type="button" class="btn btn-flat text-white">陳核</a>
<a type="button" class="btn btn-flat text-white">退文</a>
<a type="button" class="btn btn-flat text-white">決行</a>
<a type="button" class="btn btn-flat text-white">關閉</a>
</div>
css code:
.topmenu {
text-align:center !important; }
In this case text-align: center !important won't work due to the fact that your element is not covering the whole navbar so it is centered already.
width: 100%; solution
So you should make your div maximize to its available space with width: 100%; and then use text-align: center; so the output should be something like this:
.topmenu {
text-align: center;
width: 100%;
}
NOTE: It won't perfectly work if you add extra elements to your navbar.
Margin auto solution
The other approach to achieve this is to force the div to have a specific space with their adjacents by using margin: 0 auto;. like this one:
.topmenu {
margin: 0 auto;
}
NOTE: Since you got an empty div in the left side of the nav elements <div class="search-form d-none d-lg-inline-block"></div>, this may look weird in the first place, but whenever you delete that empty div or try to import your search input within it you will see the results and would be working perfectly.
When going to the URL you provided and opening the DevTools, I can see that you have
<div class="navbar-right">
<ul class="nav navbar-nav">...</ul>
</div>
If you provide more samples of the code you're using, we can direct you better on what changes you need to make.
Width of your div is adapted to its content and pulled to right.
Try to do this in your css,
css code: .topmenu { text-align:center !important; width:100%;}
I don't know exactly what you mean, but in case you want to set your list in center vertically, you can use flexbox
.topmenu {
display: flex;
align-items: center;
}
Learn more about Flexbox
I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
Trying to select all labels inside an element except labels inside one child div. Tried two approaches but nothing seems to be working
.parentDiv *:not(.skipLabelsParent) label {
display: inline-block;
margin-bottom: 12px;
}
This is failing because * selects all parents including child elements of skipLabelsParent class and parents of labels inside.
.parentDiv label:not(.skipLabelsParent label) {
display: inline-block;
margin-bottom: 12px;
}
I am not sure why this is failing.
Any solutions other than this?
fiddle here
The fiddle contains just an example of situation. Don't take that as final case. Labels could be anywhere and at any level. I just want to
skip inside every skipLabelsParent class. I made that very clear in my
question. Please read question again and provide generic solution.
Else I will look for other approach.
I think the easiest way to do what you want, is to do some intelligent re-styling of the labels you want to skip with a good selector:
.parentDiv .skipLabels{/*your css here*/)
and style the child div with that selector. This would be the least amount of work.
Next, depending on how many labels we're talking about, is to add the class directly to the labels you want to skip so that the following code would skip the <label>'s with the class .skipLabels:
.parentDiv label:not(.skipLabels) {
display: inline-block;
margin-bottom: 12px;
}
If that isn't gong to work for you, then I think you should just override the the child div's styling right under the parent divs:
.parentDiv{
display: inline-block;
margin-bottom: 12px;
}
.skipLabels{
display: .....;
margin-bottom: ....;
}
This way, you can put the .skipLabels class anywhere and you will know the styling will take effect like you want.
I believe that it is not working because you cannot chain selectors in :not yet http://caniuse.com/#search=%3Anot
https://developer.mozilla.org/en/docs/Web/CSS/:not
Currently you can only use “simple selectors”
https://drafts.csswg.org/selectors-3/#simple-selectors
This works for example:
HTML:
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label class="skip">Pnoe</label>
<label class="skip">Pnoe</label>
<div>
<label class="skip">Pnoe</label>
</div>
</div>
</div>
CSS:
.parentDiv label:not(.skip) {
color: red;
}
https://jsfiddle.net/gjaozryL/19/
Whereas this selector breaks all together:
HTML:
<label>Pnoe</label>
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label class="skip">Pnoe</label>
<label class="skip">Pnoe</label>
<div>
<label class="skip">Pnoe</label>
</div>
</div>
</div>
CSS:
label:not(.parentDiv .skip) {
color: red;
}
https://jsfiddle.net/gjaozryL/20/
In your CSS you can define
.parentDiv > label{
color: red;
}
Thanks to the ">"-operator, only elements that are direct children of the element before are selected. In your case only the first label "Pnoe".
Given this nested div/label fragment:
div:not(.skipme) > label {
color: red;
}
<div class="parentDiv">
<label>Pnoe</label>
<div>
<label>Pnoe</label>
<label>Pnoe</label>
<div>
<label>Nested Phoe</label>
</div>
</div>
<div class="skipme">
<label>skip me</label>
</div>
<div class="somediv">
<label>Phoe</label>
<div class="another-div">
<label>Phoe</label>
</div>
</div>
</div>
I have the code below
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-grid-solo"><button id="btn1" type="submit" >Submit</button></div>
</fieldset>
</li>
if i am using this the button is not center..
how place it in center
Here is the Fiddle.
Just add the following code in your css.
button{
position: relative;
left: 50%;
}
I dont have idea about your css code. generally, to align some element in center you can use something like this
CSS:
div.center{
margin:0 auto;
display:block;
text-align:center;
}
HTML:
<div class="ui-grid-solo center"><button id="btn1" type="submit" >Submit</button></div>
I have found using text-align in css will work:
.ui-grid-solo { text-align:center; }
I'm trying to build a search form using Bootstrap. Here's the HTML:
<form class="form-search search-bar">
<div class="input-append">
<input type="text" class="search-query" placeholder="Enter your address here...">
<button type="submit" class="btn btn-primary">
Search <i class="icon-search icon-white"></i></button>
</div>
</form>
I'm new to CSS - how do I style this so that the search elements are horizontally centered across the block? Also, how do I increase the height of the search elements?
You should add an ID
.search-bar {
text-align: center; /* centers inline and inline-block children */
}
.search-bar .search-query,
.search-bar .btn-primary {
display: inline-block; /* allows for heights to be set */
}
.search-bar .search-query {
height: 30px;
}
.search-bar .btn-primary {
height: 40px;
}
to place them next to eachother you can use the float command
.search-query {
float:left;
}
.btn-primary {
float:left;
}
Make sure the width of input-append is large enough to place them next to eachother.
to increase there height just place height:[amount]; in the same block as float in the CSS