Hi,
I have the following code :
<div style='width: 350px; height: 300px; border: 2px solid #000000;' align='center'><p style='text-align: left;'><?php echo $contact; ?></p></div>I want the paragraph to be centered horizontally inside the div and the text inside the paragraph should be aligned to the left. How can I accomplish this ?
The usual way is with
margin:0 auto;that doesn’t work.
Could you add an example output? I have a hard time visualizing how an element should be centered and aligned left at the same time. Does $contact contain some multi line content…?
yes it does but I already solved it with display: inline-block;. thanx.
Be wary of using
display:inline-blockit doesn’t always handle white space correctly
I just want to chime in on something about inline styling - Don’t do it! ;D
If anything use the style tags in the header in the HTML, but preferably in a external file. All you doing is creating one big headache done the road if you don’t like the current style. Just my .02 cents.
Sorry about the Sass (A CSS Preprocessor), but I don’t feel like hunting down the code. This not only centers the text horizontally but vertically granted it’s only a couple of numbers - its still text: This is just to give you an idea that doing CSS in an external file not only saves you a headache - it becomes second nature after awhile.
.calday a {
@include box-sizing(border-box);
float: left;
display: block;
background-color: $color-100;
border: 1px solid $color-1200;
text-decoration: none;
color: $color-200;
font-size: 1.0rem;
line-height: 54px;
text-align: center;
width: 100%;
max-width: 54px;
height: 54px;
&:hover {
background-color: $color-3100;
color: $color-1200;
font-weight: bold;
}
}
}
.main p
{
color:red;
text-align: left;
//border: 1px solid red;
word-wrap: break-word;
margin:25px 25px 25px 25px;
width:300px;
height:250px;
}
</style>
</head>
<body>
<div class="main" >
<p>
<?php
$contact = 'sadfsdfsddfcsdfsdfsdfsgdgdgdfgdfgdfgfdgdfgfd';
echo $contact;
?>
</p>
</div>
</body>