I have the following piece of CSS code
<div class="ws-contact-info">
<div class="col-sm-4">
<h2 style="text-align: center;">Phone:</h2>
<p style="text-align: center;">(077) 4223 0866</p>
</div>
</div>
h2, p {display: inline-block;}
The formatting and sizing of text is exactly how I want but it is displayed in a column on my the top of my homepage.
Phone:
(077) 4223 0866
I would like it to display as follows
Phone:(077) 4223 0866
Could anyone kindly help?
As mentioned here, h2 and p tags are block elements, meaning they're displayed beneath each other because they take 100% of the width, if you want them to show besides each other, you can use display: inline-block or display: flex (there are a few more options for that). You can also write them on the same line and/or use spans to differentiate them with styling.
h2, p { display: inline-block }
or
<h1 style="display: inline-block">Hi</h1>
You can use inline-block like that to show them in the same line and you can change the margin to center it again.
<div class="ws-contact-info">
<div class="col-sm-4">
<h2 style="text-align: center; display: inline-block; margin-left: 40%;">Phone:</h2>
<p style="text-align: center; display: inline-block; margin: auto;">
(077) 4223 0866
</p>
</div>
</div>
Also i suggest you to check display types for further information about how to display like the way you want them.
Both h2 and P tags are block element. If you need to show the content in same line you need to add below css
h2,p{
display:inline-block;/*or use display: flex or display:inline
}
Else, you may change the HTML(without css) tag like below
<div class="ws-contact-info">
<div class="col-sm-4">
<h2 style="text-align: center;">Phone:<span>(077) 4223 0866<span></h2>
</div>
</div>
Related
What I want to have is two divs side-by-side and within one of them is an image and in the other is two divs, one above the other.
This happens to be a Wordpress theme, but I'm pretty sure this is basic CSS question.
The Wordpress stack exchange told me it was off-topic.
Call the left div #divL and the right div #divR.
I found an answer on SO mentioning that I should set display of #divL and #divR to
inline-block. I can get this to work on a test html file that I created in isolation but it doesn't work in the wordpress header. Specifically the divs in the wordpress header #divL and #divR act as if they had display: block rather than being positioned side-by-side.
Changing them to display: inline does put them side-by-side but then it
doesn't work to stack two divs within #divR.
I'll replicate here some of the code in the Wordpress header. Note that I'm going to simplify this by omitting the stacked divs inside #divR, because the symptom is obvious without that.
the following is what I'm using to try to get #divL and #divR to display side-by-side.
#divL { display: inline-block; }
#divR { display: inline-block; }
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
But they display one above the other.
Note that this actually does work to get them side-by-side, but then the
stacked divs inside #divR don't work as intended:
#divL { display: inline; }
#divR { display: inline; }
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
There is a lot of CSS on these other elements but I'm not sure which of it is important to this question so I'll wait for someone to comment and tell me what I should include.
As I wrote in my comment, you should set widths for those ìnline-blocks, that should basically do what you are after.
But as an alternative you can also use display: flex; on the container DIV. This can be done rather simple, but in the snippet below I added some additional settings to define a certain width for the two DIVs and to center the contents in these DIVs both horizontally and vertically (by also making the child elements flexboxes with flex-directon: column. For the rest of the settings see the code below.
.title-area {
display: flex;
justify-content: center;
align-items: stretch;
}
.title-area>* {
width: 40%;
border: 1px solid green;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" src="https://placehold.it/200x150/fa0" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
Here's an example of what would work:
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full" />
</div>
<div id="divR">
<div id="divTR">Some text that should go on top right</div>
<div id="divBR">Some text that should go on bottom right</div>
</div>
</div>
<nav>....</nav>
</div>
</header>
And the CSS:
#divL {
display: inline-block;
width: 49%;
}
#divR {
display: inline-block;
width: 49%;
}
But also Jon P is right; it might be worth your while to investigate one of the newer methods for dynamically spacing and sizing content.
How can I make the following span to be left-aligned with its parent, in this case, the DIV with id of “rightPanel”?
Currently, the following code displays the span content to the right with Safari browser.
<div id="rightPanel">
<span style="background-color:##ACE1AF; white-space:nowrap;">
my stuff goes here...
</span>
</div>
Thanks.
Use the following CSS:
#rightPanel {
text-align: left;
}
Or, if you want to use inline styles (not recommended) as you did in your span tag:
<div id="rightPanel" style="text-align: left">
Using Angular Material, I'm trying to create a horizontal line with a word in the middle. Something pretty similar to the one displayed here.
I've tried this and it's close but I'd like the lines to be vertically aligned to the middle of the word or.
<div layout="row" layout-align="center start">
<md-divider flex></md-divider>
<div style="flex: 0 1 auto;">or</div>
<md-divider flex></md-divider>
</div>
http://jsfiddle.net/devotis/a7m6xrwy/
I guess, I need styled <hr>'s left and right. How can I improve this code and remain within the ways of Angular Material?
A nice way to do it is to use the layout="row" along with flex.
<span layout="row"><hr flex/>or<hr flex/></span>
JS fiddle applying this idea to the button text: http://jsfiddle.net/a7m6xrwy/1/
You can style the hr attribute with css. The md-divider directive isn't meant to be used this way, so there is no reason to try and force it. If you wish to use a directive to solve this issue, you will have to write your own md-divider directive which takes the display text as a parameter.
Here is a solution using material's mat-divider:
<h1>Divider with text</h1>
<div class="container">
<div class="line"><mat-divider></mat-divider></div>
<div class="text mat-typography">Hey there</div>
<div class="line"><mat-divider></mat-divider></div>
</div>
.container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.line {
flex: 1;
}
.text {
padding-left: 10px;
padding-right: 10px;
}
The result will look like this:
For people using angular material 2 and flex-layout, here's my solution. Not entirely satisfactory, but it does the trick.
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="5px">
<mat-divider fxFlex="1 0"></mat-divider>
<div>or</div>
<mat-divider fxFlex="1 0"></mat-divider>
</div>
This would work like a charm.
<mat-divider style="width: 40%; display: inline-block;"></mat-divider>
<span style="padding: 20px; font-weight: 500;">Or</span>
<mat-divider style="width: 40%; display: inline-block;"></mat-divider>
PS: You may extract the inline styles into meaningful CSS classes. Avoided it here for brevity.
Output:
I want to create a simple thumbnail grid for showing images from the Europeana API. However for some weird, probably very obvious, reason I get random rows in this grid with large spaces as if the floating isn't working. However the same layout with random images (http://placehold.it/250x350) does not seem to have this problem. See result of html and css here: http://jsfiddle.net/VqJzK/1/ .
CSS of the grid
.thumb {
width: 200px;
background-color: #F5F5F5;
border-radius: 5px;
margin-bottom: 0.5em;
margin-top: 0.5em;
text-align: left;
position: relative;
display: inline-block;
float: left;
}
.thumb img {
width: 150px;
vertical-align: middle;
}
and the html:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
....
The broken formatting is because some images are taller in the second example. The taller images take up more space and because the thumbnails have float:left set, they flow around the taller one. This explains why the first example works, since they all have the same height.
That said, float:left is also overriding the display:inline-block with display:block - see css display property when a float is applied
If you remove float:left or set the height of the .thumb class the thumbnails will also line up as expected.
sounds like the standard inline-block bug, simple fix is to change your code to this:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div><div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
butt the elements right up next to each other, because it's treated as inline spaces between elements matter, because text itself is inline
alternatively you could use comments like this:
<div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_26_19311105%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div><!--
--><div class="thumb">
<img alt="test" src="http://europeanastatic.eu/api/image?uri=http%3A%2F%2Fhdl.handle.net%2F10796%2FKOEKOEK_JG1_02_19310521%3Flocatt%3Dview%3Aderivative2&size=LARGE&type=TEXT"/>
</div>
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>