I'm trying make a layout for mobile application.
How do I centralize the title label relative to parent?
Here's my HTML:
<div id="title">
<i class="fa fa-th-large" id="menuButton"></i>
<small class="title">PROFILE</small>
</div>
See in jsBIN
try to add margin to title, like this:
#title{
margin: 0 auto;
}
Do u mean you want to centralize the text inside ? If so, try this code:
#title {
text-align: center;
}
Centering the Profile only:
HTML:
<div id="title">
<div id="icon">
<i class="fa fa-th-large" id="menuButton"></i>
</div>
<div id="text">
<small class="title">PROFILE</small>
</div>
</div>
CSS:
#title {
background: #13A3B5;
padding: 10px 5%;
font-size: 2em;
overflow: hidden;
}
#icon {
float: left;
width: 5%;
}
#text {
float: left;
width: 95%;
text-align: center;
}
Related
I've been using bootstrap framework recently. I'm new to this framework.
so I'm trying to position an image next to some text in landing page. I use grid system of the bootstrap and it work. but when I come to push the image using position: absolute, and left:somePX, it make horizontal scroll and get out of the body of the page. what should I do to prevent this scrolling. I just want to cut the image and position it as I want.
Note: I've applied so many templates using only CSS with out bootstrap and I never get across on same problem.
thank you
here is my html code:
/* landing */
/*this is the image style*/
.landing {
padding-bottom: 100px;
margin-right: 0;
}
.landing .right .image {
position: relative;
}
.landing .right .image .back img {
position: absolute;
left: 100px;
}
.landing .right .image .mockups {
position: absolute;
top: -100px;
left: 100px;
}
/*this is text style I don't think the problem is here but I put it*/
.landing .left {
padding-top: 80px;
padding-left: 80px;
}
.landing .left h1 {
line-height: 1.3;
margin-bottom: 20px;
}
.landing .left p {
font-size: 15px;
margin-bottom: 20px;
}
.landing .left button {}
<div class="landing row">
<div class="col-md-6 left">
<div class="container">
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account<br> will be a one-stop-shop for spending, saving,<br> budgeting, investing, and much more.</p>
<button class="btn linear" type="button">Request Invite</button>
</div>
</div>
<div class="col-md-6 right">
<div class="image">
<div class="back">
<img class="back-image img-fluid" src="images\bg-intro-desktop.svg" alt="">
</div>
<div class="front">
<img class="img-fluid mockups" src="images\image-mockups.png" alt="">
</div>
</div>
</div>
</div>
you can simply add to your body:
<style>
body{
overflow-x: hidden;
}
</style>
I have mat dialog box in Angular project and I want to make 1 row at the top and 3 row at the bottom just like the picture below but some reason I can't make it work. Also I don't want horizontal scroll bar and trying to hide it by playing with the width but I'm not sure why it's still there. Any suggestion
HTML
<div mat-dialog-content class="dialog-container">
<div class="column">
<div class="header">Tops</div>
</div>
<div class="parent">
<div class="left">
<div class="sub-header">Left</div>
<div style="background-color: darkblue;">
<div></div>
</div>
</div>
<div class="center">
<div class="sub-header">Center</div>
</div>
<div class="right">
<div class="sub-header">Right</div>
</div>
</div>
</div>
CSS
.dialog-container{
width: 1000px;
height:1000px;
overflow-x:hidden;
}
.header{
position: relative;
font-size: 20px;
text-align: center;
font-family: 'Raleway';
}
.button{
margin-top: 15px;
align-items: center;
}
.clickable {
cursor: pointer;
}
.parent {
display: flex;
overflow: hidden;
}
.column{
display: flex;
flex-direction: column;
background-color: blue;
}
.left {
width: 200px;
background-color: green;
}
.right {
width: 300px ;
background-color: blue;
}
.center{
width: 300px;
background-color: red;
}
.header{
font-size: 30px;
font-family: "Raleway-ExtraLight";
padding: 30px;
}
.sub-header{
font-size: 20px;
margin-top: 25px;
font-weight: bold;
}
Right now it look like this
The final design I want to achieve
I'm not sure how many columns or rows will be needed to achieve it like the final design but I playing around for now. Any suggestion will be really helpful.
You could use mat-grid. You just have to define your row and cols and that's it.
You will have 4 cols and 4rows. Your buttons at the bottom will go in the mat-dialog-actions div made for this.
Here is how you could do with mat-grid-list : Demo on StackBlitz
If the demo is nto working, here the code so you can try it :
html:
<mat-grid-list cols="18" rowHeight="1:3">
<mat-grid-tile [colspan]="3">Map Insights</mat-grid-tile>
<mat-grid-tile [colspan]="7">
<input type="text" placeholder="blablabla" />
</mat-grid-tile>
<mat-grid-tile></mat-grid-tile>
<mat-grid-tile [colspan]="7"><i>Blablablabla your text in italic</i></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="3">Your side bar</mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
<mat-grid-tile [rowspan]="5">=></mat-grid-tile>
<mat-grid-tile [rowspan]="5" [colspan]="7"></mat-grid-tile>
</mat-grid-list>
css:
mat-grid-tile {
background: lightblue;
}
Css is just here to show the blocks ;)
I want to add padding top to ::after and want to make it centered.
But it's not happening, this is what I get :
After using this css :
.list-unstyled li::after {
content: url(images/heartborder.png)
text-align:center;
padding-top: 30px;
}
and this is my HTML CODE :
<li>
<div class="col span-1-of-3 box">
<span class="icon-small">
<i class="fa fa-eye" aria-hidden="true"></i>
<div class="details">
<h5 class="heading">View / Edit Profile</h5>
<p>You can view or edit your profile from here. Phone no., address, other information etc. etc.</p>
</div>
</span>
</div>
</li>
Your :after is set by default to display: inline so padding has no effect on it. Change it to inline-block or block and then it will.
To center it (as requested in comments), use flex on the div as below:
div {
width: 50px;
height: 50px;
background: green;
display: flex;
justify-content: center;
}
div:after {
content: "";
width: 20px;
height: 20px;
background: blue;
display: inline-block;
padding-top: 5px;
}
<div></div>
you need to add semicolon after content: url(images/heartborder.png) attribute
OR
I think you need to do like this:
.list-unstyled li::after {
content: url(images/heartborder.png);
text-align: center;
padding-top: 30px;
}
Use display:block or display:inline-block to apply padding or margin. add margin:0 auto to get center.
.list-unstyled li::after {
content: url(images/heartborder.png) 0 0 no-repeat;
text-align: center;
padding-top: 30px;
display: block;
margin: 0 auto;
}
<li>
<div class="col span-1-of-3 box">
<span class="icon-small">
<i class="fa fa-eye" aria-hidden="true"></i>
<div class="details">
<h5 class="heading">View / Edit Profile</h5>
<p>You can view or edit your profile from here. Phone no., address, other information etc. etc.</p>
</div>
</span>
</div>
</li>
I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
Try this:
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
You can do it like this
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
Asuming to my comment, here is a JSFIDDLE
Without setting relative or absolute
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
DEMO
Update 1:
DEMO
I know it's a bit late and you probably already figured this out.
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
See the attached pen.
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>#ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Short way just add display: grid; place-items: center; to your div and your ready to go.
like this:
<div style="width:180px; height:180px; display: grid; place-items: center;">
<i class="las la-user-circle"></i>
</div>
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari