paragraph containing various divs

I am struggling to align my text properly and looking for a solution similar to this example http://jsfiddle.net/xKSUH/. The issue I am facing is that my text is not centered and there seems to be an extra space on the second line...

Here is my HTML code:

    <div class="row"> 
<div class="span12"> 


    Hello <span data-bind="text: viewModel.firstName()"></span>,
    We have analyzed <span data-bind="text: viewModel.user.nbAnalyzedMails()"></span>
    emails, extracted <span data-bind="text: viewModel.user.newMessages()"></span>
    new messages. Please check report in your dashboard ></span> <br>



</div>  
</div>

And here is the CSS I'm using:

.row {text-align: center}

Answer №1

take a look at this

CSS

.container {text-align: center}
.container .box p{
    display: inline-block;
    margin: 0px;
}

html

<div class="container"> 
    <div class="box"> 
        <p>Greetings <span data-bind="text: viewModel.firstName()"></span>,</p>
        <p>We have reviewed <span data-bind="text: viewModel.user.nbAnalyzedMails()"></span></p>
        <p>emails, uncovered <span data-bind="text: viewModel.user.newMessages()"></span></p>
        <p>new messages, so please refer to the report on your dashboard.</p>
    </div>  
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with flipping div functionality in IE9 on flipping content demo

I recently developed a flipping div using transitions and 3D transforms based on the Flipping Content Demo 1 from . While this works smoothly on most browsers, unfortunately IE 9 does not support transitions and 3D transforms. In order to address this iss ...

I am interested in creating a class that will produce functions as its instances

Looking to create a TypeScript class with instances that act as functions? More specifically, each function in the class should return an HTMLelement. Here's an example of what I'm aiming for: function generateDiv() { const div = document.crea ...

Increasing an ID number automatically using Javascript

I'm currently working on a functionality where a unique number is automatically generated whenever a new record is created. For instance, if I were to click "Create record" on a webpage, the number would auto-fill in the record ID field. Subsequently, ...

CSS: Hover below the designated target to reveal an expanding dropdown menu

My initial solution involved toggling the visibility on and off when hovering. However, this approach is not optimal as the menu should smoothly transition into view. When the visibility is toggled, the user does not experience the intended transition effe ...

Concealing Redundant Users in Entity Framework

I am faced with the task of sorting through a database containing over 4000 objects, many of which are duplicates. My goal is to create a new view that displays only one instance of each element based on the first and last name. I have already implemented ...

Choose the initial search result without actually opening it using jQuery

I am working on an HTML file that contains multiple input fields, which get automatically filled when a corresponding item is selected from the auto-complete feature. Here is a snippet of my HTML code: <table class="table table-bordered"> <u ...

What is the most effective way to pause my function in order to capture the window's location hash?

When passing values into anchors from arrays and needing them to run a function when clicked, there are certain considerations to keep in mind. Key Functionality <script type="text/javascript"> function SetOption() { var hash = window.lo ...

HTML5sortable is causing JavaScript to run twice when the sortupdate event is triggered

Having a sortable list on my aspx page, created using this specific plugin, I encountered an unusual issue. <ul id="sortableQueue" class="sortable"> <li style="cursor: move" data-shotid="1">Shot Name - 1</li> <li style="cursor ...

Using Javascript to implement a min-width media query

I'm currently facing an issue with my website () where the media query (min-width) is not effectively removing a JavaScript code within a specific div. The HTML structure in question is as follows: <div id="advertisementslot1"> <script lang ...

How do I customize the appearance of an Element-UI data table in Vue?

I'm struggling to customize the color of an Element UI datatable in my project. I've tried several approaches, but so far, nothing has worked. Here is the code I am currently using: <template> <el-table :data="tableData.filter ...

Leveraging Global SCSS Variables in Next.JS with SASS

In my Next.js Application, I have a global CSS file named main.scss imported in the pages/_app.js file. _app.js import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} ...

Struggling with implementing ng-repeat in AngularJS for displaying HTML content

I stumbled upon a post that covers pretty much what I'm trying to achieve: AngularJS - Is it possible to use ng-repeat to render HTML values? Currently, the code appears like this and displays correctly as text: <div ng-repeat="item in items.Item ...

Is there a way to retrieve Google Scholar citations using SERPAPI?

I am looking to retrieve citations for a list of authors along with their email IDs. Is there a way to programmatically fetch these citations using SERPAPI? ...

The classes from TailwindCSS being passed as props in Next.js are not displaying properly when used within a map

const DummyData = [ { _id: 1, title: "lorem ipsum", desc: " ", cta: "Explore Service", ctaUrl: "/", theme: "#E4F8ED", btnTheme: "#4F9D73", links: [ { ...

Widget remains static until job triggers data refresh, preventing CSS transition initialization

I am struggling with the html/coffee/scss aspects, although I'm comfortable with Ruby. On my website, I have implemented a hotlist widget sourced from this link: https://gist.github.com/andre-morassut/8705385. While it functions properly, I encounter ...

What is the process for customizing the user interface of modules in Apache OFBiz?

For the past month, I have been immersed in working on Apache ofbiz (17.12.07) and have developed a custom UI requirement for a client. My goal is to incorporate a side-bar (see screenshot attached below) into all ofbiz modules. To achieve this, I created ...

Having trouble with the vertical-align property in Google Chrome?

<html> <head> <style> table,td {border:1px solid black ;} table {width : 80% ;height:80%;} .top {vertical-align:top}; .center {vertical-align: middle}; .bottom {verti ...

The layout of an HTML and CSS page does not adjust according to the size of the

Having trouble scaling down my HTML and CSS code properly using only %'s and vw's. The entree div and drink div are dynamically populated, making formatting even more challenging. <!DOCTYPE HTML> <html> <link rel="stylesheet" h ...

Activate the button click event using JavaScript or jQuery automatically when the page is loaded in Internet Explorer

Currently, I'm faced with this code snippet: window.onload = function () { $('#btnFilter').click(function (e) { btnFilter(e); }); } The issue here is that the function only works when the button is clicked. What I actually ...

Utilizing CSS in Angular applications

I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...