I am looking to increase the size of the header of a jquery mobile app. When I do that I need the title to be centred. I found that I can add a line like:
line-height: 30px;
to the css, but that is just far to much of a hack. I assume there must be a better way to do it.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<style type="text/css"><!--
.ui-header {
height: 50px;
}
-->
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>This Needs To Be Centred Vertically</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
The easiest way to vertically center text of a block element is by making the line-height the same as the height of said element. Note that this will only work if you have a single line of text.
line-height: 30px;
height: 30px;
On an inline or table-cell element, you could use vertical-align: middle to achieve the same effect.
Also note that forcing display: table-cell on an element will not work in IE6-7.
In your case, I would suggest going with the line-height/height technique.
You may try with
display: table-cell;
vertical-align: middle;
in your CSS.
You could try something like this:
<div data-role="header">
<div class="ui-bar">
<h1>This Needs To Be Centred Vertically</h1>
</div>
</div>
Doc: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
Related
I've tried to do some basic CSS, but I'm having issues putting the title beside the logo image.
Here is an image of my code:
I've used display:inline; to raise the text, but then I can't change it afterwards. The height is locked and it won't seem to cooperate.
So help?
Tian, you may try to add
display: inline;
to both #header-image and #logo.
it will solve your problem.
Here is a quick re-write of the nav bar. You can try to alter it to fit yours, and throw an image in there to see it. May have to justify/move where you want your text in relation, but at least this gets it right next to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</Title>
<link rel="stylesheet" href="teststyles.css">
</head>
<body>
<div class="container">
<div class="nav">
<div class="img">
<img src="">
</div>
<div class="logo">
<h1>Text</h1>
</div>
</div>
</div>
</body>
</html>
CSS:
.nav {
display: flex;
}
.img {
display: flex;
}
.logo {
display: flex;
}
I want to start off saying that I just started learning CSS, (got done learning HTMl couple days ago) and I'm having a little bit of trouble with how to put input text in the middle with pictures next to input text. To be a little bit more specific look at my code.
<html>
<head>
<title>Login</title>
</head>
<body>
<div class="Wrapper">
<div class="main">
<form>
<div>
<div>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-64.png">
</div>
<input type="text" placeholder="Username"><img src="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/key-16.png" </div>
<div>
<input type="text" placeholder="Password"><img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672396-lock-16.png" </div>
</form>
</div>
<div>
</div>
</body>
</html>
it will basically show you 2 input boxes, one for username another with password, with 2 pictures next to those boxes, the key one for user, the lock one for password.
TLDR; I want the input boxes on the middle of the page with the pictures(little icons) next to the input boxes (like showed in my code, but in the middle) and a I also want the picture of the user (the head one) in the middle of that whole structure, or middle of the page.
basically I would like to see everything aligned.
I don't know if I expressed myself well enough, I hope so. I would like to see the html and css code, thank you so much!!!
Try with this
.main {
text-align:center;
}
<html>
<head>
<title>Login</title>
</head>
<body>
<div class="Wrapper">
<div class="main">
<form>
<div>
<div>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-64.png">
</div>
<input type="text" placeholder="Username"><img src="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/key-16.png" </div>
<div>
<input type="text" placeholder="Password"><img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672396-lock-16.png" </div>
</form>
</div>
<div>
</div>
</body>
</html>
To align images the best way is use this css style:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
In your code, I'm using text-align becouse works thanks to the "div".
Text-align property work with block containers, not with inline elements, and img is an inline element, but div is block.
Maybe try adding Style Attribute to your code inside <head> </head>
<style>
.center {
margin: auto;
width: 60%;
padding: 10px;
}
</style>
I require help. My problem is that, I try to move all my text and images to one side of the webpage and leave the navbar. However my navbar is moving along with the text. I will put my code below.
The Problem-
i.stack.imgur.(com)/rLIjl.(png)
Html-
my html
CSS-
my css
Try the css rule:
ul.navbar { position: static }
It's not clear what you want to achive but I think you are trying to put the navbar and the text side by side. In order to do that you can use:
<div style="float:[right/left];">
<!-- your content -->
</div>
to make your content float to the right or to the left. In this case, this could be a possible solution for your problem:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="prova-css.css">
</head>
<body>
<div style="float:left;">
<img src="img.jpg" style="width:191px;height:158px;">
<ul class="navbar">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div style="float:right; width:70%;">
<h1>Title</h1>
<p>Welcome to Shoe Nation!
<p>(This site is currently under construnction)
<adress>Something</adress>
</div>
</body>
</html>
CSS
body {
padding-left: 11em;
background-color:#FAEAD3;
color:#FF3B3F;
}
ul.navbar {
list-style-type: none;
margin: 0;
padding: 50px;
}
I'm studying code that I found on the net and faced problem. When I add text to the main div called content, I get no margins, text is too close to sidebar. How should I fix it? Here's the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="outer">
<div id="header"></div>
<div id="inner">
<div id="sidebar"></div>
<div id="content">
</div>
</div>
</html>
CSS
#outer {width:1000px;margin:0 auto;}
#inner {overflow:hidden;}
#header {min-height:40px;background:#bbb}
#content {width:900;min-height:900px;float:left;background:#ccc;clear:}
#sidebar{width:100px;min-height:250px;float:left;background:#ddd}
Use padding and/or margins on your content and/or sidebar div in the CSS
http://www.htmldog.com/guides/cssbeginner/margins/
Have you tried something such as
#content{box-sizing:border-box, width:900;min-height:900px;float:left;background:#ccc; padding:10px;}
Using "box-sizing" should ensure it doesn't mess up your page.
edit: and yeah, close that html, that could really help.
Don't know what you need exactly. But try to add padding-left or margin-left
#content {width:900;min-height:900px;float:left;background:#ccc;padding-left:20px;margin-left:10px;}
Inside the content div add another div and use margins on it.
You can also use a paragraph tag and same use margins on it, this will not break your layout.
Also you are missing a closing tag, this definatly needs to be fixed.
Try:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="outer">
<div id="header"></div>
<div id="inner">
<div id="sidebar"></div>
<div id="content">
<div class="box">
all text and content comes here
</div>
</div>
</div>
</div>
</html>
Additional CSS:
.box {
margin:50px;
}
I have a div (with a fixed width) that has 2 image elements as children.
Each image is the same width as the div so the images are placed not on the same row (see screenshot) .
This is great, but I want the images to displayed the same way (one on top of the other) but at the bottom of the div.
I'm able to achieve such behavior in some browsers using:
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
on the div css.
Is there a nicer way to achieve that?
Here is the code I used for the example:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;
width:33px}
</style>
</head>
<body>
<div class="container">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div>
</body>
</html>
Make the container position:relative; and set the images to position:absolute; bottom:0;
However, this will not stack the images. They will overlay each other. If you need them stacked, the easiest (dynamic) way is to wrap the images with another container (like a div), and then set the styles on it. For example...
Markup:
<div class="container">
<div class="innerContainer">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
</div>
</div>
CSS:
.container {
background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;
height:116px;
width:33px;
position:relative;
}
.container .innerContainer {
position:absolute;
bottom:0;
}
The solution: Add an innner div and set its position to bottom:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;position:relative;
width:33px;}
.inner {position:absolute;bottom:0px;}
</style>
</head>
<body>
<div class="container"><div class="inner">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div></div>
</body>
Thanks to Josh for suggesting this.