Login | Register | FAQ
Anonymous

Centering two div/span elements in the same line

+ Post a reply

1 post Page 1 of 1


Centering two div/span elements in the same line

by peerogel » Fri Apr 13, 2018 3:33 pm

I am new to html. I am trying to center two span elements but they keep breaking into new lines. I thought I had figured it out by switching it out to div elements and using float but I cant get it to center properly. I kept seeing that flex was a solution but I have no idea what to do with the css part. Every time I try to put it somewhere with the rest of the script, the script will not work. I am using a script for InfoPath. Thanks in advance for any help.

Code: Select all
<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(getUserProfileImage,'sp.js');

var CamlResult;
function getUserProfileImage(){
    var clientContext = new SP.ClientContext.get_current();
    var web = clientContext.get_web();
    var userInfoList = web.get_siteUserInfoList();
    var camlQuery = new SP.CamlQuery();

    var userID = _spPageContextInfo.userId;

    // define the query to retrieve the given user's details
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name="ID"/><Value Type="Number">' + userID + '</Value></Eq></Where></Query><RowLimit>1</RowLimit></View>');

    CamlResult = userInfoList.getItems(camlQuery);
    clientContext.load(CamlResult);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args){
    var profile, title, login, email, username, jobtitle,

    // There should be only result. Get the item at index 0
    profile = CamlResult.itemAt(0);

    // read all the properties out

    title = profile.get_item('Title');
    login = profile.get_item("Name");
    email = profile.get_item("EMail");
    jobtitle = profile.get_item('JobTitle');
    username = profile.get_item("UserName");


    // Setup HTML
    document.getElementById('userTitle').innerHTML = title;
    document.getElementById('userEmail').innerHTML = email;
    document.getElementById('userJobTitle').innerHTML =jobtitle;
    document.getElementById('userUserName').innerHTML = username;

}

</script>

<div style="text-align: center;"><span style="font-size: 16px;"><span style="font-family: times new roman,times,serif;"><span style="color: rgb(0, 51, 0);"><strong>ID: <span id="userUserName"></span></strong></span></span></span></div>

<div id="userJobTitle" style="text-align: center; float: left;"><span style="font-size: 16px;"><span style="font-family: times new roman,times,serif;"><span style="color: rgb(0, 51, 0);"><strong></strong></span></span></span></div>

<p style="text-align: center;"><span style="font-size: 16px;"><span style="font-family: times new roman,times,serif;"><span style="color: rgb(0, 51, 0);"><strong>: <span id="userTitle"></span></strong></span></span></span></p>

<div style="text-align: center;"><span style="font-size: 16px;"><span style="font-family: times new roman,times,serif;"><span style="color: rgb(0, 51, 0);"><strong>Email: <span id="userEmail"></span></strong></span></span></span></div>

User avatar

peerogel

  • Posts: 1
  • Joined: Fri Apr 13, 2018 1:04 pm


+ Post a reply

Page 1 of 1