I have a table which in the header I have to align the text to center.
.info-header {
font-size: small;
text-align: center;
}
However the row will still take the left alignment from jQuery mobile. Anyone have any solution for this?
Try jQuery CSS to change it like:
$('.your-selector-class').css('text-align', 'center');
This can also may help you.
Related
I want you to help me with the "horizontal scroll bar" coming in the HTML. I don't want it but it is unnecessarily coming please debug my code and please tell me the problem that is with this code.
My code is hereenter image description here:-
https://drive.google.com/drive/folders/16Uocf15o0XBovswjvGvLf3CRRwyIze7P?usp=sharing
Regards,
Hridyansh Sati
In your css file you use translate to center a heading which is wrong practice.
Assuming that your heading is in a div, you can center it with text-align:center;
If you want to vertically align it, you will need to use Flexbox or Grid.
To solve your problem, change your .sec2 css class to this:
.sec2{
color: rgb(255, 0, 0);
font-size: 80px;
font-family: 'Nunito', sans-serif;
text-align: center;
}
As stated, you must add your code in your question.
Please add some CSS into your stylesheet I hope it will work.
body{
overflow-y: scroll;
overflow-x: hidden;
}
I am really bad with css and html, can somebody help with this simply problem?
On the bottom of the [site][1] i have text and sharing icons. How can i make them in one row? Like on right from text. It looks horrible now.
Thank you!
here:
this css should work:
.text-muted {
display: inline-block;
}
div.ya-share2 {
display: inline-block;
float: right;
margin-top: 20px;
}
explain: it makes both elements able to coexist in the same line, plus the margin-top is just for aligning it.
add that to your CSS file and youre good to go
I am trying to align my search button with my text input/search bar but cannot seem to get it to work. Any help would be appreciated!
The site can be seen here: http://www.computerpartsforsale.co.uk/Whois/
Thanks in advance!
#search button {
padding: 24px;
}
Add this style.
I use font awesome icons and everything was aligned in the middle as it should in staging. Once the site went live, all the font awesome icons moved up to the top and I can't figure out why. I compared the css being used on chrome developer tools but so far I can't see any difference.
Here's the link to the homepage. http://studyusa.com/en/ You can see that the magnifying glass on the top navigation, all of the social network buttons under the slider, and menu icons next to "Browse Schools by Degree Level" all moved up.
Hope I can get any hints.
-- update
Wow, thanks for all the answers! However I must apologize to everybody because I checked the site today and it looks the way it should without me changing any code. Now I'm curious as to why something like this is possible.
iam not sure about this, hope this is because of various line-heights used.. but try update the class ".fa" below. Hope this will fix your issue..
.fa {
line-height: inherit!important;
}
Try to add this:
.fa {
transform: translate(0, -50%);
top: 50%;
position: relative;
}
Don't alter .fa CSS, this is needed for every icon and will break every other icon you have!
Instead, add this to your css:
.search-trigger {padding:15px;}
I tested that in Chrome and it worked fine.
Try:
.toggle-make a {
display: inline-block;
float: none;
}
I have played with Chrome Inspector and it seems that floating has something to do with it. As far as I can see, you are using display: block; with width but no height.
You need to add this code
.fa-twitter:before{
position: relative;
top: 8px;
}
I would like to vertically align the div ".person-user" so that is vertically in the center of the parent element ".person" (The text to be in the center of the photo but to the right) How can I do this?
Thanks
http://jsfiddle.net/mpBW5/5/
This is something that should be simple, but is actually a pain in the backside to do. Here's a quick jsFiddle, using display: table on the person div, and display: table-cell on the picture wrapper and info divs:
http://jsfiddle.net/2yfDs/1/
What follows is a combination of markup and style that will accomplish exactly what you want, without JavaScript and JQuery.
Markup:
<div class="person">
<img class="profile" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/320450_10151028382307410_534533150_n.jpg"/>
<div class="profile">
<div class="name">Colin Pacelli</div>
<div class="fact">Ohio University</div>
</div>
</div>
Style:
.person {
display: table;
}
.person img.profile{
height: 50px;
margin-right: 10px;
/*border-radius: 4px 4px 4px 4px;*/
}
.person div.profile {
display: table-cell;
vertical-align: middle;
/*font-family: calibri;
font-size: 14px;
color: #444;*/
}
/*.person .profile .name {
font-weight: bold;
}*/
I have commented out the rules that do not principally affect the solution, so that all can see how little it takes with CSS if done right. Compared to 10 lines of code running using 32Kb of client side code running on top of a virtual machine. And you thought Adobe Flash Player was evil. I do not mind JQuery much, especially for things it can do well, but frankly, involving JQuery in a clear cut case of pure style is a just bit too much.
As you probably can figure, I have edited your JSFiddle, stripping it of non-essentials and cutting it down to a minimal example that exhibits the desired behavior while leaving the visuals in place.
Since you specified html and css as tags, and since it is in nearly all cases a better idea not to resort to JavaScript/JQuery when they can be avoided, I would really use a markup and style solution like the above instead.
The most precise way is to do this with jQuery and calculate it dynamically for each div. This is useful if some/all image/text divs have different heights. The example. The code:
$("div.person-user").each(function() {
$(this).css("marginTop", function() {
var imgH = $(this).prev("div.person-user-pic").height(),
thisH = $(this).height(),
h = (imgH/2) - (thisH/2);
return h;
});
});
BUT: if every div and image has the same height, you could just do this:
div.person-user {margin-top: 8px;}
I hope that this answers your question?
This is a very common question and the best explanation so far is here:
http://phrogz.net/css/vertical-align/index.html